这篇文章主要介绍了vue实现禁止浏览器记住密码功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
查找资料
网上查到的一些方法：
- 使用 autocomplete=”off”（现代浏览器许多都不支持）
- 使用 autocomplete=”new-password”
- 在真正的账号密码框之前增加相同 name 的 input 框
- 使用 readonly 属性，在聚焦时移除该属性
- 初始化 input 框的 type 属性为 text，聚焦时修改为 password
- 使用 type=”text”，手动替换文本框内容为星号 “*” 或者 小圆点 “●”
实现过程
用到的字段
data() { return { username: '', password: '', } }
由于 autocomplete=”off” 现代浏览器已经不支持，所以直接放弃了对密码框设置，直接使用 autocomplete=”new-password” ，亲测Chrome(v88.0.4324.104)、edge(v88.0.705.56)及火狐(v67)可用，但火狐(v85)还是会提示记住密码。
<i class="el-input_icon el-icon-user"></i>
参考：
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#browser_compatibility
在解决火狐高版本提示的过程中，试验了3/4/5的方法，结果都不如人意，但发现火狐浏览器只要最终密码框里的值为星号 “*” 或者小圆点 “●” 时，就不会提示记住密码（不知是否正确，可自行测试），于是新增字段 pwdCover 用于关联输入框，实际传值用 password。
templete
<i class="el-input_icon el-icon-user"></i>
script data() { return { username: '', password: '', pwdCover: '', } }, method: { login() { this.pwdCover = this.pwdCover.replace(/\S/g, '●'); // 登录请求，失败时恢复pwdCover t<p style="color:transparent">本文来源gao!%daima.com搞$代*!码$网3</p>his.pwdCover = this.password; }, setPassword(val) { this.password = val; } }
自信满满发给了项目上的同事，结果翻车了，现场环境：
- 操作系统：Windows7、Windows10
- 浏览器：Chrome v74.0.3729.108
我安装同版本的谷歌浏览器之后发现问题还是没有出现，而我的操作系统是 Windows10，不知是哪里出了问题，最终还是选择了方法6
最终
templete
<i class="el-input_icon el-icon-user"></i> <i class="el-icon-lock"></i>
script
setPassword(val) { let reg = /[0-9a-zA-Z]/g; // 只允许输入字母和数字 let nDot = /[^●]/g; // 非圆点字符 let index = -1; // 新输入的字符位置 let lastChar = void 0; // 新输入的字符 let realArr = this.password.split(''); // 真实密码数组 let coverArr = val.split(''); // 文本框显示密码数组 let coverLen = val.length; // 文本框字符串长度 let realLen = this.password.length; // 真实密码长度 // 找到新输入的字符及位置 coverArr.forEach((el, idx) => { if(nDot.test(el)) { index = idx; lastChar = el; } }); // 判断输入的字符是否符合规范，不符合的话去掉该字符 if(lastChar && !reg.test(lastChar)) { coverArr.splice(index, 1); this.pwdCover = coverArr.join(''); return; } if (realLen <coverLen) { // 新增字符 realArr.splice(index, 0, lastChar); } else if (coverLen <= realLen && index !== -1) { // 替换字符（选取一个或多个字符直接替换） realArr.splice(index, realLen - (coverLen - 1), lastChar); } else { // 删除字符，因为 val 全是 ● ，没有办法匹配，不知道是从末尾还是中间删除的字符，删除了几个，不好对 password 处理，所以可以通过光标的位置和 val 的长度来判断 let pos = document.getElementById('pwd').selectionEnd; // 获取光标位置 realArr.splice(pos, realLen - coverLen); } // 将 pwdCover 替换成 ● this.pwdCover = val.replace(/\S/g, '●'); this.password = realArr.join(''); },
以上就是vue实现禁止浏览器记住密码功能的示例代码的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue实现禁止浏览器记住密码功能的示例代码
转载请注明原文链接：vue实现禁止浏览器记住密码功能的示例代码
