最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 完美解决 element-ui input=password 在浏览器会自动填充密码的问题

    正文概述 掘金(不一样的front烟火)   2021-01-11   778

    最近发现解决 el-input 自动填充密码问题,解决方式主要有:

    1.都是设置 autocomplete属性;

     <el-input type="password"
    	    v-model="passwordForm.checkPass"
    	    auto-complete="new-password"
    	    >
    

    2.通过添加readonly&onfocus =“this.removeAttribute('readonly');

    <input type="password" name="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >
    

    以上两种方法,在Chrome版本 87.0.4280.141,不关闭浏览器的密码提示密码功能和自动登录的功能(如下图),亲自尝试,都不管用 完美解决 element-ui input=password 在浏览器会自动填充密码的问题

    最终找到了如下方式解决问题,亲试有效:

    <el-form-item label="用户名" prop="user_name">
            <el-input v-model="info.user_name" :disabled="updateFlag" auto-complete="off" name="person.user.user_name"></el-input>
          </el-form-item>
          <el-form-item label="厂商" prop="factory">
            <el-input v-model="info.factory" auto-complete="off" name="person.user.factory"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="info.password" :type="((newPwdReadOnly && info.password) || info.password)?'password':'text'" auto-complete="new-password" name="person.user.new_password" @focus="newPwdFocus($event)" :readonly="newPwdReadOnly" @blur="newPwdBlur($event)" ref="newPwdRef"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPwd">
            <el-input v-model="info.confirmPwd" :type="((rePwdReadOnly && info.confirmPwd) || info.confirmPwd)?'password':'text'" auto-complete="confirm-password" name="person.user.re_password" @focus="newPwdFocus($event, false)" :readonly="rePwdReadOnly" @blur="newPwdBlur($event, false)" ref="reNewPwdRef"></el-input>
          </el-form-item>
          ```
    给各输入项加了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 在浏览器会自动填充密码的问题

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元