前端解决浏览器会自动填充密码的行为

以vue为例

  • 第一步:在该页面所有的input框前添加如下代码(针对于谷歌)

html:

<input type="password" name="oldPwdInput" placeholder="" maxlength="20" autocomplete="off" style="position: fixed;top:-1000px">
<input style="display:none">
<input type="password" style="display:none">
  • 第二步:给所有的type="password"的输入框添上readonly为true的属性(主要针对于火狐)
       mounted() {
            var that = this;
            that.$nextTick(() => {
                console.log(that.$util.isBroswer())
                if(that.$util.isBroswer() != "IE") {           //判断该浏览器不是IE的时候,添加readonly属性
                    var inputTags = document.getElementsByTagName("input");
                    for(var i = 0; i < inputTags.length; i++) {
                        if(inputTags[i].type == "password") {
                            inputTags[i].setAttribute('readonly', true);
                        }
                    }
                }
            });

        }
  • 第三步:给所有的type="password"的输入框都添加如下事件:获得焦点的时候移除readonly只读属性,当失去焦点时添加readonly只读属性

html:

<input type="password" placeholder="" v-model='form.confirm_password' @focus='removeCpwdTip($event)' @blur="addReadOnly($event,'confirmPwd')" maxlength="20" autocomplete="off">

js:

removeCpwdTip($event) {
    this.tips.cpwd = false;
    if(this.$util.isBroswer() != "IE") {
        $event.target.removeAttribute('readonly');
    }
},
addReadOnly($event, name) {
       if(this.$util.isBroswer() != "IE") {  //判断该浏览器不是IE的时候,添加readonly属性
           $event.target.setAttribute('readonly', true);
       }
}
  • 注意:添加和移除readonly只读属性不考虑IE浏览器,不然在IE浏览器上可能会出现获取焦点了但输入不进去的情况,再加上IE本身并未出现浏览器会自动填充密码的行为,所以这边不用考虑IE
Logo

前往低代码交流专区

更多推荐