符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
使用vue怎么禁止浏览器记住密码?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
创新互联长期为数千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为孝义企业提供专业的成都网站建设、成都网站制作,孝义网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。用到的字段
data() { return { username: '', password: '', } }
由于 autocomplete="off" 现代浏览器已经不支持,所以直接放弃了对密码框设置,直接使用 autocomplete="new-password" ,亲测Chrome(v88.0.4324.104)、edge(v88.0.705.56)及火狐(v67)可用,但火狐(v85)还是会提示记住密码。
在解决火狐高版本提示的过程中,试验了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
浏览器:Chrome v74.0.3729.108
我安装同版本的谷歌浏览器之后发现问题还是没有出现,而我的操作系统是 Windows10,不知是哪里出了问题,最终还是选择了方法6
templete
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怎么禁止浏览器记住密码的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!