需求:工厂可能存在多用户使用一台电脑,避免电脑记住密码,其他人使用时选择自动填充,登陆别人账号
不需要兼容火狐可直接采用
autocomplete="new-password"
其他:通过输入框监听用户输入字符自动替换为*
<template>
<div>
<input
ref="pwd"
type="text"
auto-complete="off"
placeholder="请输入登录密码"
onkeyup="this.value=this.value.replace(/./g,'•');"
@keyup.enter.native="handleLogin"
@keydown="onkeydown"
@input="onInput($event)"
/>
</div>
</template>
<script>
export default {
name: "pwdInput",
data() {
return {
strPwd: "",
};
},
methods: {
onInput(event) {
if (/[\u4e00-\u9fa5]/.test(event.data)) {
this.$message.error("密码不能包含中文,请切换至英文输入法。");
}
if (event.data) {
this.strPwd += event.data;
} else {
this.strPwd =
this.strPwd.length == 1
? ""
: this.strPwd.substr(0, this.strPwd.length - 1);
//1.全部选择移除在输入
if (this.$refs.pwd.value.length === 0) {
this.strPwd = "";
}
}
//2全部选择不移除直接输入
if (this.strPwd.length > this.$refs.pwd.value.length) {
this.strPwd = event.data;
}
// 传递真实密码
this.$emit("inputBack", this.strPwd);
},
onkeydown(event) {
if (event.keyCode == "13") {
this.$emit("onkeydown");
}
},
},
};
</script>