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

 更新时间:2021年02月03日 14:14:48   作者:crystal_yx  
这篇文章主要介绍了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)还是会提示记住密码。

<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 单向数据流的原理

    深入理解Vue 单向数据流的原理

    这篇文章主要介绍了深入理解Vue 单向数据流的原理,详细的介绍了Vue 单向数据流的原理和使用,具有一定的参考价值,有兴趣的可以了解一下
    2017-11-11
  • 解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题

    解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit(

    这篇文章主要介绍了vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效的解决方法,这里需要主要项目中用的element-ui是V1.4.3,感兴趣的朋友参考下吧
    2018-08-08
  • vue实现动态路由的方法及路由原理解析

    vue实现动态路由的方法及路由原理解析

    这篇文章主要介绍了路由原理及vue实现动态路由,Vue Router 提供了丰富的 API,可以轻松地实现路由功能,并支持路由参数、查询参数、命名路由、嵌套路由等功能,可以满足不同应用程序的需求,需要的朋友可以参考下
    2023-06-06
  • VUE3使用JSON编辑器方式

    VUE3使用JSON编辑器方式

    这篇文章主要介绍了VUE3使用JSON编辑器方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue3属性值传递defineProps详解

    Vue3属性值传递defineProps详解

    在Vue3中,defineProps()函数是定义和接收组件属性的主要方式,通过简单定义或对象定义,开发者可以灵活地接收并处理组件上的属性值,简单定义方式通过数组传递属性名,而对象定义则可以约束属性的数据类型、默认值及是否必须传递等
    2024-09-09
  • Vue安装浏览器开发工具的步骤详解

    Vue安装浏览器开发工具的步骤详解

    这篇文章主要介绍了Vue安装浏览器开发工具步骤详解,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 解决vue打包后刷新页面报错:Unexpected token <

    解决vue打包后刷新页面报错:Unexpected token <

    这篇文章主要介绍了解决vue打包后刷新页面报错:Unexpected token <相关知识点,需要的朋友们参考下。
    2019-08-08
  • Vue 实现前进刷新后退不刷新的效果

    Vue 实现前进刷新后退不刷新的效果

    这篇文章主要介绍了Vue 实现前进刷新后退不刷新的效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • vue语法之render函数和jsx的基本使用

    vue语法之render函数和jsx的基本使用

    这篇文章主要介绍了vue语法之render函数和jsx的基本使用,在Vue中是支持jsx的,凡是我们是比较少在Vue中使用jsx的,jsx在react中使用的更加广泛,因此在这里我简单介绍一下jsx的基本使用,需要的朋友可以参考下
    2022-08-08
  • Vue 实现接口进度条示例详解

    Vue 实现接口进度条示例详解

    这篇文章主要介绍了Vue实现接口进度条功能,在请求数据的过程中,需要添加监听函数来监测数据请求的过程变化,并更新组件相应的属性和界面元素,本文结合实例代码详细讲解,需要的朋友可以参考下
    2023-04-04

最新评论