vue实现禁止浏览器记住密码功能的示例代码

2023-07-05 22:57:08 76

查找资料

网上查到的一些方法：

使用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)还是会提示记住密码。

参考：

https://developer.mozilla.org/zh-CN/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#browser_compatibility

在解决火狐高版本提示的过程中，试验了3/4/5的方法，结果都不如人意，但发现火狐浏览器只要最终密码框里的值为星号“*”或者小圆点“●”时，就不会提示记住密码（不知是否正确，可自行测试），于是新增字段pwdCover用于关联输入框，实际传值用password。

templete

script
data(){
return{
username:'',
password:'',
pwdCover:'',
}
},
method:{
login(){
this.pwdCover=this.pwdCover.replace(/\S/g,'●');
//登录请求，失败时恢复pwdCover
this.pwdCover=this.password;
},
setPassword(val){
this.password=val;
}
}

自信满满发给了项目上的同事，结果翻车了，现场环境：

操作系统：Windows7、Windows10
浏览器：Chromev74.0.3729.108

我安装同版本的谷歌浏览器之后发现问题还是没有出现，而我的操作系统是Windows10，不知是哪里出了问题，最终还是选择了方法6

最终

templete

script

setPassword(val){
letreg=/[0-9a-zA-Z]/g;//只允许输入字母和数字
letnDot=/[^●]/g;//非圆点字符
letindex=-1;//新输入的字符位置
letlastChar=void0;//新输入的字符
letrealArr=this.password.split('');//真实密码数组
letcoverArr=val.split('');//文本框显示密码数组
letcoverLen=val.length;//文本框字符串长度
letrealLen=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
到此这篇关于vue实现禁止浏览器记住密码功能的示例代码的文章就介绍到这了,更多相关vue禁止浏览器记住密码内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

vue实现禁止浏览器记住密码功能的示例代码

查找资料

实现过程

最终

热门推荐

随机推荐