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

不多说，先上代码：

(```)

<template>

<div id="login">

<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浏览器弹出是否记录密码的提示框。

转载于:https://www.cnblogs.com/-lixu1992/p/10771592.html