VUE阻止浏览器记住密码若依CLOUD(INPUT框密码替换圆点)

网上找的要不就是缺少方法要不就是不好用,故发一个完整的
粘贴可用版本

javascript 复制代码
  <el-form-item prop="password">
        <el-input v-model="loginForm.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>
javascript 复制代码
      loginForm: {
        username: "",
        password: "",
        pwdCover:"",
      },
      password: "",
javascript 复制代码
setPassword(val) {
      let realarr = this.password.split(''); // 真实密码
      let coverarr = val.split(''); // 覆盖的密码数组
      let coverlen = coverarr.length; // 覆盖的密码数组
      let realLen = realarr.length; // 覆盖的密码数组
      let lastchar = ''; // 新输入的字符 
      let index = -1; // 新输入的字符位置
      coverarr.forEach((el, elIndex) => {

      if (el !== '●') {
        // 截取未被替换为·的字符串,即为本次键入的内容
          index = elIndex;
          lastchar = lastchar + el; // 因为监听的是每次输入框的变化值,所以插入的一定是连贯的字符串
        }
      });
      if (lastchar.length) {
        index = ( index + 1 ) - lastchar.length // 有输入的字符串,计算真正的插入位置
      }
      if (realLen +lastchar.length === coverlen) {
        // 未删除字符串且新增字符,直接插入
        realarr.splice(index, 0, lastchar);
      } else if (index === -1) {
        //index = -1 即未找到非*号字符,没有新增,无法通过该方法判断在哪个位置删除的
        // 使用selectionStart获取光标位置,确定位置,删去缺少的元素个数
        let pos = document.getElementById('pwd').selectionStart; 
        realarr.splice(pos, realLen - coverlen);
      } else {
        // 替换字符
        realarr.splice(index, (realLen + lastchar.length)-coverlen, lastchar);
      }
        // 将 pwdCover 替换成 ●
        this.loginForm.pwdCover = val.replace(/\S/g, '●');
        this.loginForm.password = realarr.join('');
        this.password = realarr.join('');
    },

粘贴不可用版本(需要手工一个个字符键入)

javascript 复制代码
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.loginForm.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.loginForm.pwdCover = val.replace(/\S/g, '●');
        this.loginForm.password = realArr.join('');
        this.password = realArr.join('');
    },

    getCode() {
      getCodeImg().then(res => {
        this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
        if (this.captchaOnOff) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
相关推荐
10年前端老司机1 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程5 小时前
2025前端面试题
前端·面试
前端小趴菜056 小时前
React - createPortal
前端·vue.js·react.js
晓13137 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo7 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7898 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼9 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原9 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf9 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js