Vue实现阻止浏览器记住密码功能的三种方法
作者：潮汐未见潮落
本文主要介绍了Vue实现阻止浏览器记住密码功能的三种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前言
通常浏览器会主动识别密码表单，在你登录成功之后提示保存密码 ， 密码保存到浏览器的 密码管理器中 ( 如下是谷歌浏览器 )
这种行为是浏览器的行为 ，这种操作也是为了方便用户的使用
现在的一个需求是要阻止这个保存密码的弹窗提示
实现方法
查找资料发现的一些方法：
- 使用 autocomplete="off"（现代浏览器许多都不支持）
- 使用 autocomplete="new-password"
- 在真正的账号密码框之前增加相同 name 的 input 框
- 使用 readonly 属性，在聚焦时移除该属性
- 初始化 input 框的 type 属性为 text，聚焦时修改为 password
- 使用 type="text"，手动替换文本框内容为星号 “*” 或者 小圆点 “●”
可以看到实现这个需求有许许多多的方法，但是实际上确有各种各样的问题，下面是我自己测试的几个方法
方法一
密码框添加 autocomplete="new-password" 属性
根 index.html 文件添加 meta 元数据 (该步骤可以省略)
密码输入框
<el-input
prefix-icon="el-icon-lock"
type="password"
name="xxxx"
placeholder="密码"
v-model="password"
autocomplete="new-password"
>
</el-input>index.html 文件 (该步骤可以省略)
<!DOCTYPE html>
<html lang="">
<head>
.....
<meta name="autocomplete" content="off">
.......
</head>
......
<body>
........
</body>
</html>注意
这种方法可以适配 谷歌浏览器 、 Edge 、 IE 浏览器
不兼容 火狐浏览器
方法二
新添加两个输入框 ， type 分别设置为 text 和 password
设置 display： none 属性让其隐藏
具体代码
<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>注意
这种方法可以适配 谷歌浏览器 、 Edge 、 IE 浏览器
不兼容 火狐浏览器
方法三
把密码框的 type 定义为 text ，这样浏览器就无法正确自动识别 密码
给输入框绑定事件 ， 每次输入数据触发事件， 把 密码 替换成 圆点 ●
给输入框右侧 小眼睛手动绑定事件 ，控制密码的显示隐藏
具体代码
<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("登录成功");
}
}注意
这种方法可以适配 谷歌浏览器 、 Edge 、 IE 浏览器
同时兼容 火狐浏览器
目前本地测试暂未发现问题
到此这篇关于Vue实现阻止浏览器记住密码功能的三种方法的文章就介绍到这了,更多相关Vue 阻止浏览器记住密码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！