完美解决 element-ui input=password 在浏览器会自动填充密码的问题


        
      
      
        
      
      
        
      
      
        
      

给各输入项加了auto-complete属性,只能避免保存的时候弹出是否保存密码弹框的问题。
内容为空的时候点击type="password"的input框或二次(多次)点击,还是会弹出密码框,所以在上面加了type在password和text之间切换(只能解决第一次多次点击的场景)。
具体解决,给type="password"的输入项增加focus,blur事件和readonly属性,具体focus, blur方法:

newPwdFocus(evt, isNew = true) {
      if (evt) {
        evt.stopPropagation();
        evt.preventDefault();
      }
      setTimeout(() => {
        if (isNew) {
          this.newPwdReadOnly = false;
        } else {
          this.rePwdReadOnly = false;
        }
      }, 100);
    },
    newPwdBlur(evt, isNew = true) {
      if (evt) {
        evt.stopPropagation();
      }
      if (isNew) {
        this.newPwdReadOnly = true;
      } else {
        this.rePwdReadOnly = true;
      }
    },

关键在于setTimeout 0的延时。
以上还不算完全解决,输入内容,再回车删除内容,发现自动填充框又出来了,所以需要watch以下:

 watch: {
    "info.password": function () {
      if (this.info.password === "") {
        this.newPwdReadOnly = true;
        this.newPwdFocus(null);
      }
    },
    "info.confirmPwd": function () {
      if (this.info.confirmPwd === "") {
        this.rePwdReadOnly = true;
        this.newPwdFocus(null, false);
      }
    }
  },

以上还不算完全解决,内容为空的时候点击type="password"的input框或二次(多次)点击,还是会弹出密码框。或者输入密码,回退清空再点击还是会弹出自动填充框。解决办法,加mousedown事件(注意不是keydown,也不是click)

addClickEvt() {
      if (this.$refs.newPwdRef) {
        this.$refs.newPwdRef.$refs.input.onmousedown =  (evt) => {
          if (evt) {
            evt.preventDefault();
            evt.stopPropagation();
          }
          if (this.info.password === "" || this.newPwdReadOnly) {
            this.$refs.newPwdRef.$refs.input.blur();
            setTimeout(() => {
              this.$refs.newPwdRef.$refs.input.focus();
            }, 0);
          }
          return false;
        };
      }
      if (this.$refs.reNewPwdRef) {
        this.$refs.reNewPwdRef.$refs.input.onmousedown =  (evt) => {
          if (evt) {
            evt.preventDefault();
            evt.stopPropagation();
          }
          if (this.info.confirmPwd === "" || this.rePwdReadOnly) {
            this.$refs.reNewPwdRef.$refs.input.blur();
            setTimeout(() => {
              this.$refs.reNewPwdRef.$refs.input.focus();
            }, 0);
          }
          return false;
        };
      }
    },

当点击(或多次点击)密码框的时候会触发mousedown事件,先失焦就阻止了自动填充框的弹出,再聚焦就实现了鼠标还在输入框的功能。
完美解决!
个人觉得实际直接绑定mousedown的处理逻辑应该就够了(没尝试)。

你可能感兴趣的:(完美解决 element-ui input=password 在浏览器会自动填充密码的问题)