html禁止表单自动填充,html禁止自动填充input表单vue下的完美解决办法

不多说，先上代码：

• :type="isChrome?‘text‘:‘password‘"

  ref="password"

  autocomplete="off"

  @focus="handleFocus"

  @blur="handleBlur"

  class="inputPsd"

  placeholder="密码">

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‘

}

},

};

.inputPsd{

-webkit-text-security:disc;

}

Chrome浏览器自动记录密码很方便，但是不是谁都喜欢，所以有需求干掉这个功能。

Chrome浏览器根据type=‘password’的input判断是否弹出记录密码的提示框，所以我用一个text输入框代替密码框，用-webkit-text-security:disc;这个属性来模拟密码框输入的字符都是圆点，但是这样模拟的密码框内可以切出中文输入法和复制，所以让它获取焦点的时候变为真的密码框。失去焦点变为text是为了Chrome浏览器弹出是否记录密码的提示框。

原文：https://www.cnblogs.com/-lixu1992/p/10771592.html