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

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

以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