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


Posted in Vue.js onFebruary 03, 2021

查找资料

网上查到的一些方法:

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

<el-input v-model="username" type="text" name="text" placeholder="账号" autocomplete="off"><i slot="prefix" class="el-input_icon el-icon-user"></i></el-input>

<el-input v-model="password" type="password" name="pwd" id="pwd" placeholder="密码" autocomplete="new-password"></el-input>

参考:

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

<el-input v-model="username" type="text" name="text" placeholder="账号" autocomplete="off"><i slot="prefix" class="el-input_icon el-icon-user"></i></el-input>

<el-input v-model="pwdCover" type="password" name="pwd" id="pwd" placeholder="密码" autocomplete="new-password"@input="setPassword"></el-input>
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

<el-form-item>
 <el-input v-model="username" type="text" name="text" placeholder="账号" autocomplete="off"><i slot="prefix" class="el-input_icon el-icon-user"></i></el-input>
</el-form-item>
<el-form-item>
 <el-input v-model="pwdCover" type="text" name="pwd" id="pwd" placeholder="密码" autocomplete="off" @input="setPassword"><i slot="prefix" class="el-icon-lock"></i></el-input>
</el-form-item>

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实现禁止浏览器记住密码功能的示例代码的文章就介绍到这了,更多相关vue 禁止浏览器记住密码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
详解Vue的options
May 15 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 #Vue.js
Vue常用API、高级API的相关总结
Feb 02 #Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 #Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 #Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 #Vue.js
vue-video-player 断点续播的实现
Feb 01 #Vue.js
Vite和Vue CLI的优劣
Jan 30 #Vue.js
You might like
Smarty分页实现方法完整实例
2016/05/11 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
node.js中的require使用详解
2014/12/15 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
python flask框架实现重定向功能示例
2019/07/02 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
Python用Jira库来操作Jira
2020/12/28 Python
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
教师评优事迹材料
2014/01/10 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
给领导的检讨书
2014/02/16 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
元旦主持词开场白
2015/05/29 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫