不多說，先上代碼：
(```)
<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瀏覽器彈出是否記錄密碼的提示框。