浏览器默认会对用户提交表单行为进行监控,若发现type属性值为password的input控件,且该控件可见时,会提示用户是否记住密码。

网上搜到的方法有不少,如点击时改变输入框属性之类的,自动填充autocomplete="off"之类的,效果不明显,且火狐上测试一直没有效果。最后还是决定仅使用文本框作为密码输入框,但视觉上看到的是输入的明文,观感不佳。

本文针对禁止浏览器记住密码、自动填充的功能使用的方法是:
不使用type为password的输入框,全程使用type=”text“的文本输入框,根据每次输入值替换文本框内容为星号 “*” 或者 小圆点 “·”(中文)。
可以复制粘贴密码,可选中替换。

    handleinput(val){
      let realarr = this.loginForm.plainPassword.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('coverpwd').selectionStart; 
        realarr.splice(pos, realLen - coverlen);
      } else {
        // 替换字符
        realarr.splice(index, (realLen + lastchar.length)-coverlen, lastchar);
      }
      this.$set(this.loginForm, 'plainPassword', realarr.join(""))
      this.$set(this.loginForm, 'coverPassword', coverarr.join("").replace(/./g,'·'))
    },
    checkCapslock(e) {
    // 判断大写键是否启动
      const { key } = e
      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
    }

在el-form-item中设置prop="plainPassword"为真实密码的值,依然可以使用elementUI表单的验证方法。

      <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
        <el-form-item prop="plainPassword">
          <el-input
            ref="plainpassword"
            v-model="loginForm.plainPassword"
            type="text"
            placeholder="密码"
            tabindex="2"
            autocomplete="off"
            style="display:none"
          />
          <el-input
            id="coverpwd"
            v-model="loginForm.coverPassword"
            placeholder="密码"
            tabindex="2"
            autocomplete="off"
            @keyup.native="checkCapslock"
            @input="handleinput"
            @blur="capsTooltip = false;"
            @keyup.enter.native="handleLogin"
          />
        </el-form-item>
      </el-tooltip>
Logo

前往低代码交流专区

更多推荐