避免 el-input 密码自动填充的实用方法
在开发 Web 应用时,通常需要避免浏览器自动填充密码。以下是一些可行的解决方案,特别针对使用 Element UI 框架的 el-input
组件。
方法 1:设置随机的 name
和 autocomplete
属性
浏览器根据 name
属性来识别输入字段的类型,因此可以使用随机的 name
属性,并将 autocomplete
设置为 new-password
。
实现
<el-input
type="password"
:name="randomName"
autocomplete="new-password"
v-model="password">
</el-input>
export default {
data() {
return {
password: '',
randomName: `password_${Math.random().toString(36).substr(2, 9)}`
};
}
}
方法 2:使用隐藏的密码输入字段
通过在页面中添加一个隐藏的输入字段,可以避免自动填充密码字段。
实现
<el-input
type="text"
style="display: none;"
autocomplete="username">
</el-input>
<el-input
type="password"
autocomplete="new-password"
v-model="password">
</el-input>
方法 3:使用 meta
标签阻止密码管理器
在 HTML 中添加以下 meta
标签,可能会阻止某些密码管理器的自动填充功能。
实现
<meta name="disable-autofill" content="on">
方法 4:事件拦截
通过监听输入事件,可以在获取焦点时手动清除输入字段的内容。
实现
methods: {
clearInput(event) {
event.target.value = '';
}
}
<el-input
type="password"
autocomplete="new-password"
@focus="clearInput"
v-model="password">
</el-input>
方法 5:动态改变 readonly
属性
通过设置 readonly
属性为true,可以避免一开始自动填充,在 mousedown 或 focus 事件触发时设置为 false ,允许输入
实现
<el-input
placeholder="密码"
type="password"
v-model="loginForm.userPwd"
show-password
@focus="passwordMousedownFun"
@input="passwordInputFun"
@mousedown.native="passwordMousedownFun"
:readonly="passwordReadonly"
id="passwordRef"
>
loginForm: {
userName: "",
userPwd: "",
userRember: false,
},
passwordReadonly: true,
watch: {
loginForm: {
handler: function (newValue, oldValue) {
if (newValue.userPwd == "") {
this.passwordReadonly = true;
setTimeout(() => {
this.passwordReadonly = false;
}, 0);
}
},
deep: true,
},
},
passwordMousedownFun() {
if (this.loginForm.userPwd === "") {
this.passwordReadonly = true;
} else {
if (this.loginForm.userPwd == this.originPwd) {
this.loginForm.userPwd = "";
}
}
setTimeout(() => {
this.passwordReadonly = false;
}, 0);
},