Vue 项目 实现阻止浏览器记住密码功能

前言

通常浏览器会主动识别密码表单，在你登录成功之后提示保存密码 ， 密码保存到浏览器的 密码管理器中 ( 如下是谷歌浏览器 )

---

---

这种行为是浏览器的行为 ，这种操作也是为了方便用户的使用

现在的一个需求是要阻止这个保存密码的弹窗提示 

实现方法

查找资料发现的一些方法：

1. 使用 autocomplete="off"（现代浏览器许多都不支持）
2. 使用 autocomplete="new-password"
3. 在真正的账号密码框之前增加相同 name 的 input 框
4. 使用 readonly 属性，在聚焦时移除该属性
5. 初始化 input 框的 type 属性为 text，聚焦时修改为 password
6. 使用 type="text"，手动替换文本框内容为星号 “*” 或者 小圆点 “●”

---

可以看到实现这个需求有许许多多的方法，但是实际上确有各种各样的问题，下面是我自己测试的几个方法

方法一

密码框添加 autocomplete="new-password" 属性

根 index.html 文件添加 meta 元数据 (该步骤可以省略)

密码输入框

---

index.html 文件 (该步骤可以省略)

  
   .....
     
   .......
  
 ......
  
   ........
  

---

 注意

这种方法可以适配 谷歌浏览器 、 Edge 、 IE 浏览器

不兼容 火狐浏览器

---

方法二

新添加两个输入框 ， type 分别设置为 text 和 password

设置 display： none 属性让其隐藏

---

具体代码

---

注意

这种方法可以适配 谷歌浏览器 、 Edge 、 IE 浏览器

不兼容 火狐浏览器

---

方法三

• 把密码框的 type 定义为 text ，这样浏览器就无法正确自动识别 密码

• 给输入框绑定事件 ， 每次输入数据触发事件， 把 密码 替换成 圆点 ●

• 给输入框右侧 小眼睛手动绑定事件 ，控制密码的显示隐藏

---

具体代码

 // 输入框输入事件
setPassword(val) {
      if (this.isShowPassword) {
        this.password = val;
      } else {
        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("");
      }
    },
     // 点击右侧小眼睛控制显示隐藏
    hidePassword() {
      if (!this.isShowPassword) {
        // console.log("显示");
        this.isShowPassword = true;
        this.pwdCover = this.password;
      } else {
        // console.log("隐藏");
        this.isShowPassword = false;
        this.pwdCover = this.pwdCover.replace(/\S/g, "●");
      }
    },
     // 登录的逻辑
      userLogin() {
      if (this.account === "admin" && this.password === "admin") {
        this.loading = true;
        setTimeout(() => {
          this.$router.push({ path: "/main" });
        }, 600);
        this.$message.success("登录成功");
      }
    }

---

注意

这种方法可以适配 谷歌浏览器 、 Edge 、 IE 浏览器

同时兼容 火狐浏览器

目前本地测试暂未发现问题

---

文章如有错误，恳请大家提出问题，本人不胜感激 。 不懂的地方可以评论，我都会 一 一 回复

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力 长路漫漫，道阻且长