el-input 密码自动填充的方法汇总
作者：Wu Youlu
在开发 Web 应用时,通常需要避免浏览器自动填充密码,以下是一些可行的解决方案,特别针对使用 Element UI 框架的 el-input 组件,下面给大家分享el-input 密码自动填充的方法,感兴趣的朋友跟随小编一起看看吧
避免 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);
},到此这篇关于el-input 密码自动填充的实用方法的文章就介绍到这了,更多相关el-input自动填充内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！