foreword
Usually the browser will actively recognize the password form, and after you log in successfully, you will be prompted to save the password, and the password will be saved in the browser's password manager (the following is Google Chrome)
This behavior is the behavior of the browser, and this operation is also for the convenience of users
One of the requirements now is to prevent the pop-up prompt to save the password
Implementation
Some ways to find material discovery:
- Use autocomplete="off" (not supported by many modern browsers)
- Use autocomplete="new-password"
- Add an input box with the same name before the real account password box
- Use the readonly attribute, which is removed on focus
- Initialize the type attribute of the input box as text, and change it to password when focusing
- Use type="text" to manually replace the content of the text box with an asterisk "*" or a dot "●"
It can be seen that there are many ways to achieve this requirement, but in fact there are various problems. Here are a few methods I tested myself
method one
Add autocomplete="new-password" attribute to the password box
Add meta metadata to the root index.html file (this step can be omitted)
password input box
<el-input
prefix-icon="el-icon-lock"
type="password"
name="xxxx"
placeholder="密码"
v-model="password"
autocomplete="new-password"
>
</el-input>index.html file (this step can be omitted)
<!DOCTYPE html>
<html lang="">
<head>
.....
<meta name="autocomplete" content="off">
.......
</head>
......
<body>
........
</body>
</html>Notice
This method can be adapted to Google Chrome, Edge, and IE browsers
Not compatible with Firefox browser
Method Two
Add two new input boxes, set the type to text and password respectively
Set the display: none attribute to hide it
specific code
<div class="login-location">
<!-- 隐藏的输入框 -->
<el-input
style="display: none"
type="text"
name="xxxx"
autocomplete="off"
>
</el-input>
<el-input
style="display: none"
type="password"
name="xxxx"
autocomplete="off"
>
</el-input>
<!-- 真实输入框 -->
<el-input
ref="pass"
prefix-icon="el-icon-lock"
@keyup.enter.native="userLogin()"
v-model="password"
type="password"
placeholder="密码"
name="xxxx"
>
</el-input>
</div>Notice
This method can be adapted to Google Chrome, Edge, and IE browsers
Not compatible with Firefox browser
method three
Define the type of the password box as text, so that the browser cannot automatically identify the password correctly
Bind an event to the input box, trigger an event every time data is entered, and replace the password with a dot
Manually bind events to the small eyes on the right side of the input box to control the display and hiding of passwords
specific code
<div class="login-location">
<el-input
prefix-icon="el-icon-lock"
v-model="pwdCover"
type="text"
name="pwd"
id="pwd"
placeholder="密码"
autocomplete="off"
@input="setPassword"
@keyup.enter.native="userLogin()"
>
<i
slot="suffix"
class="el-icon-view"
style="margin-top: 10px; margin-right: 10px; font-size: 18px"
@click="hidePassword"
></i>
</el-input>
</div> // 输入框输入事件
setPassword(val) {
if (this.isShowPassword) {
this.password = val;
} else {
let reg = /[0-9a-zA-Z]/g; // 只允许输入字母和数字
let nDot = /[^●]/g; // 非圆点字符
let index = -1; // 新输入的字符位置
let lastChar = void 0; // 新输入的字符
let realArr = this.password.split(""); // 真实密码数组
let coverArr = val.split(""); // 文本框显示密码数组
let coverLen = val.length; // 文本框字符串长度
let realLen = this.password.length; // 真实密码长度
// 找到新输入的字符及位置
coverArr.forEach((el, idx) => {
if (nDot.test(el)) {
index = idx;
lastChar = el;
}
});
// 判断输入的字符是否符合规范，不符合的话去掉该字符
if (lastChar && !reg.test(lastChar)) {
coverArr.splice(index, 1);
this.pwdCover = coverArr.join("");
return;
}
if (realLen < coverLen) {
// 新增字符
realArr.splice(index, 0, lastChar);
} else if (coverLen <= realLen && index !== -1) {
// 替换字符（选取一个或多个字符直接替换）
realArr.splice(index, realLen - (coverLen - 1), lastChar);
} else {
// 删除字符，因为 val 全是 ● ，没有办法匹配，不知道是从末尾还是中间删除的字符，删除了几个，不好对 password 处理，所以可以通过光标的位置和 val 的长度来判断
let pos = document.getElementById("pwd").selectionEnd; // 获取光标位置
realArr.splice(pos, realLen - coverLen);
}
// 将 pwdCover 替换成 ●
this.pwdCover = val.replace(/\S/g, "●");
this.password = realArr.join("");
}
},
// 点击右侧小眼睛控制显示隐藏
hidePassword() {
if (!this.isShowPassword) {
// console.log("显示");
this.isShowPassword = true;
this.pwdCover = this.password;
} else {
// console.log("隐藏");
this.isShowPassword = false;
this.pwdCover = this.pwdCover.replace(/\S/g, "●");
}
},
// 登录的逻辑
userLogin() {
if (this.account === "admin" && this.password === "admin") {
this.loading = true;
setTimeout(() => {
this.$router.push({ path: "/main" });
}, 600);
this.$message.success("登录成功");
}
}Notice
This method can be adapted to Google Chrome, Edge, and IE browsers
Compatible with Firefox browser
So far, no problems have been found in local testing
If there is an error in the article, please ask everyone to ask questions, I would be very grateful. If you don't understand, you can comment, and I will reply one by one.
If the article is helpful to everyone, I hope you can give it a thumbs up and encourage it. There will be a long way to go to work together in the future, and the road will be long and difficult.