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

潮汐未见潮落

已于 2023-08-05 16:37:51 修改

阅读量2k

点赞数 1

分类专栏： HTML与CSS vue 文章标签： javascript 前端开发语言

于 2023-06-18 13:44:45 首次发布

本文链接：https://blog.csdn.net/qq_52855464/article/details/131262043

版权

vue 同时被 2 个专栏收录

47 篇文章 5 订阅

订阅专栏

HTML与CSS

8 篇文章 1 订阅

订阅专栏

前言

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

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

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

实现方法

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

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

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

方法一

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

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

密码输入框

  <el-input
      prefix-icon="el-icon-lock"
      type="password"
      name="xxxx"
      placeholder="密码"
      v-model="password"
      autocomplete="new-password"
    >
  </el-input>

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

<!DOCTYPE html>
<html lang="">
  <head>
   .....
    <meta name="autocomplete" content="off"> 
   .......
  </head>
 ......
  <body>
   ........
  </body>
</html>

注意

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

不兼容火狐浏览器

方法二

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

设置 display： none 属性让其隐藏

具体代码

 <div class="login-location">
        <!-- 隐藏的输入框 -->
        <el-input
          style="display: none"
          type="text"
          name="xxxx"
          autocomplete="off"
        >
        </el-input>
        <el-input
          style="display: none"
          type="password"
          name="xxxx"
          autocomplete="off"
        >
        </el-input>
		<!-- 真实输入框 -->
        <el-input
          ref="pass"
          prefix-icon="el-icon-lock"
          @keyup.enter.native="userLogin()"
          v-model="password"
          type="password"
          placeholder="密码"
          name="xxxx"
        >
        </el-input>
  </div>

注意

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

不兼容火狐浏览器

方法三

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

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

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

具体代码

 <div class="login-location">
            <el-input
              prefix-icon="el-icon-lock"
              v-model="pwdCover"
              type="text"
              name="pwd"
              id="pwd"
              placeholder="密码"
              autocomplete="off"
              @input="setPassword"
              @keyup.enter.native="userLogin()"
            >
              <i
                slot="suffix"
                class="el-icon-view"
                style="margin-top: 10px; margin-right: 10px; font-size: 18px"
                @click="hidePassword"
              ></i>
            </el-input>
     </div>

 // 输入框输入事件
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 浏览器

同时兼容火狐浏览器

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

补充

通常情况下，密码输入框都是禁用 回退、剪切、复制、粘贴 功能，可以给输入框添加 keydown 键盘按下事件

 <div class="login-location">
            <el-input
              prefix-icon="el-icon-lock"
              v-model="pwdCover"
              type="text"
              name="pwd"
              id="pwd"
              placeholder="密码"
              autocomplete="off"
              @input="setPassword"
              @keyup.enter.native="userLogin()"
              @keydown.native="onKeydown($event)"
            >
              <i
                slot="suffix"
                class="el-icon-view"
                style="margin-top: 10px; margin-right: 10px; font-size: 18px"
                @click="hidePassword"
              ></i>
            </el-input>
  </div>

  onKeydown(e) {
      // 禁用值的回退、剪切、复制、粘贴功能,即Ctrl+z、Ctrl+x、Ctrl+c、Ctrl+v
      let keycode;
      if (e.ctrlKey) {
        if (window.event) {
          keycode = e.keyCode; // IE
        } else if (e.which) {
          keycode = e.which; // Netscape/Firefox/Opera
        }

        if (
          90 === keycode ||
          88 === keycode ||
          67 === keycode ||
          86 === keycode
        ) {
          e.preventDefault();
          e.stopPropagation();
          return false;
        }
      }
      return true;
    }

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

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