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

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

以vue为例

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

html:

• 第二步：给所有的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：

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！