禁止自动填充input表单vue下的解决办法
不多说，先上代码：
(```)
<template>
<div >
<div class="warp">
<form action="">
<ul class="list">
<li> <input type="text" placeholder="帐号" autocomplete="off"> </li>
<li>
<input
:type="isChrome?'text':'password'"
ref="password"
autocomplete="off"
@focus="handleFocus"
@blur="handleBlur"
class="inputPsd"
placeholder="密码">
</li>
</ul>
</form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isChrome:true
};
},
mounted() {
let nav = window.navigator.userAgent
if (nav.includes('chrome')>-1){
this.isChrome = true
} else {
this.isChrome = false
}
},
methods: {
handleFocus(){
this.$refs.password.type = 'password'
},
handleBlur(){
this.$refs.password.type = 'text'
}
},
};
</script>
<style scoped>
.inputPsd{
-webkit-text-security:disc;
}
</style>
(```)
Chrome浏览器自动记录密码很方便，但是不是谁都喜欢，所以有需求干掉这个功能。
Chrome浏览器根据type=‘password’的input判断是否弹出记录密码的提示框，所以我用一个text输入框代替密码框，用-webkit-text-security:disc;这个属性来模拟密码框输入的字符都是圆点，但是这样模拟的密码框内可以切出中文输入法和复制，所以让它获取焦点的时候变为真的密码框。失去焦点变为text是为了Chrome浏览器弹出是否记录密码的提示框。