前言

想要设置浏览器不记住密码，改变input的type为text，通过css样式-webkit-text-security: disc;实现。但是这个属性只适用于谷歌浏览器

以下步骤通过js实现该功能

一、html 首先设置input的type

<el-form-item prop="password" label="原密码："><el-input v-model="password1" type="text" placeholder="请输入原密码" autocomplete="off" class="password-input" @input="changeInput('password')"></el-input>
</el-form-item>
<el-form-item prop="newPassword" label="新密码："><el-input v-model="newPassword1" type="text" @input="changeInput('newPassword')" placeholder="6-12位的字母、数字、特殊符号至少2种组成的密码" autocomplete="off" class="password-input"></el-input>
</el-form-item>

二、js

1.变量定义

每个密码框对应两个变量，一个用于接收用户的输入内容（转换为.用作展示），另一个用于表单校验和接口提交（真正的密码内容）

 const formMsg = reactive({formData: {password: '',password1: '',newPassword: '',newPassword1: '',rePassword: '',rePassword1: ''}})

2.用户输入内容时触发input事件，绑定方法changeInput

参数用于区分是那个input的值发生了变化。

const changeInput = (name) => {const event = window.event || arguments.callee.caller.arguments[0]let data = event.datalet end = event.target.selectionEndlet newPassword = formMsg.formData[name + '1']let password = formMsg.formData[name]if (/[\u2000-\u206f\u3000-\u303f\u4e00-\u9fef\uff00-\uffef]|(^\s+)|(\s+$)/.test(data)) {const deleteNum = data.lengthconst start = end - data.lengthnewPassword = newPassword.split('')newPassword.splice(start, deleteNum)formMsg.formData[name + '1'] = newPassword.length > 0 ? newPassword.join('') : ''password = password.split('')password.splice(start, password.length - newPassword.length)formMsg.formData[name] = newPassword.length > 0 ? password.join('') : ''} else {if (password.length === 0) {formMsg.formData[name] = data} else {const deleteNum = data === null ? password.length - newPassword.length : password.length - newPassword.length + 1const start = data === null ? end : end - data.lengthpassword = password.split('')password.splice(start, deleteNum, data)formMsg.formData[name] = password.join('')}formMsg.formData[name + '1'] = ''for (let index = 0; index < newPassword.length; index++) {formMsg.formData[name + '1'] += '.'}}console.log(formMsg.formData[name], formMsg.formData[name + '1'])}

3：防止粘贴

onMounted(() => {document.addEventListener('paste', function (e) {if (e.target.offsetParent.classList.contains('password-input')) {e.preventDefault()}})})

-webkit-text-security: disc；浏览器兼容问题相关推荐

video视频播放以及主流浏览器兼容
直接看代码吧! <!DOCTYPE html> <html><head><metacharset="utf-8" /><met ...
解决各大浏览器兼容问题hack方法总结
解决各大浏览器兼容问题hack,IE6/ IE7/ IE8/ IE9/ Firefox/ Opera/ Webkit/ Chrome/ Safari. 方法一 1 color:red; /* 所有浏览 ...
转：【总结】浏览器CSS Hacks汇总，浏览器兼容方式CSS Hacks
[总结]浏览器CSS Hacks汇总浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的漏洞 ...
【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果
placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...
CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
各大浏览器兼容性报告 IE、FF、Safari、OP不同浏览器兼容报告
IE.FF.Safari.OP不同浏览器兼容报告分类:UI前端設計2011-12-05 17:01323人阅读评论(0)收藏举报 IE.FF.Safari.OP不同浏览器兼容报告 1浏览器内核简介 ...
浏览器兼容问题（实战干货）
常见浏览器兼容性问题与解决方案所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或 ...
web前端——浏览器兼容问题
[1]为什么会出现浏览器兼容问题在各大浏览器厂商的发展过程中,它们对web的标准各有不同的实现,标准不同存在差异所以产生兼容性的问题. [2]浏览器内核以及代表作品 IE浏览器内核:Trident内 ...
jQuery-1.9.1源码分析系列（七）钩子（hooks）机制及浏览器兼容
处理浏览器兼容问题实际上不是jQuery的精髓,毕竟让技术员想方设法取弥补浏览器的过错从而使得代码乱七八糟不是个好事.一些特殊情况的处理,完全实在浪费浏览器的性能:突兀的兼容解决使得的代码看起来既不美 ...
浏览器兼容与图片整合
浏览器兼容与图片整合一.浏览器兼容为什么会出现浏览器兼容问题? 由于各大主流浏览器由不同的厂家开发,所用的核心也不同,架构代及码也很难重和,这就为各种莫名其妙的Bug(代码错误)提供了温床.再加上 ...

-webkit-text-security: disc；浏览器兼容问题

前言

一、html 首先设置input的type

二、js

1.变量定义

2.用户输入内容时触发input事件，绑定方法changeInput

3：防止粘贴

-webkit-text-security: disc；浏览器兼容问题相关推荐

最新文章

热门文章