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在图片上传的时候压缩图片
Nov 18 Vue.js
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
Vue router安装及使用方法解析
Dec 02 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue组件vue-esign实现电子签名
Apr 21 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
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
jQuery 表格插件整理
2010/04/27 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
python函数参数*args**kwargs用法实例
2013/12/04 Python
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
Django 多环境配置详解
2019/05/14 Python
python开启debug模式的方法
2019/06/27 Python
python中栈的原理及实现方法示例
2019/11/27 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
python三引号如何输入
2020/07/06 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
自动化专业本科毕业生求职信
2013/10/20 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
入党政审材料范文
2014/12/24 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技