序文
通常、ブラウザはパスワード フォームを積極的に認識し、ログインに成功すると、パスワードを保存するように求められ、パスワードはブラウザのパスワード マネージャー (以下は Google Chrome) に保存されます。
この動作はブラウザの動作であり、ユーザーの利便性を考慮した動作でもあります
現在の要件の 1 つは、パスワードを保存するためのポップアップ プロンプトを表示しないようにすることです。
実装
素材の発見を見つけるためのいくつかの方法:
- autocomplete="off" を使用します (最近の多くのブラウザではサポートされていません)
- 使用 autocomplete="new-password"
- 実際のアカウントのパスワード ボックスの前に同じ名前の入力ボックスを追加します。
- readonly属性を使用します。この属性はフォーカス時に削除されます。
- 入力ボックスのtype属性をテキストとして初期化し、フォーカス時にパスワードに変更します
- type="text" を使用して、テキスト ボックスの内容をアスタリスク「*」またはドット「●」に手動で置き換えます。
この要件を達成するにはさまざまな方法があることがわかりますが、実際にはさまざまな問題があります。
方法 1
autocomplete="new-password"属性をパスワード ボックスに追加します
ルートのindex.htmlファイルにメタメタデータを追加します（この手順は省略できます）
パスワード入力ボックス
<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>知らせ
この方法は、 Google
Firefox ブラウザと互換性がありません
方法 2
2 つの新しい入力ボックスを追加し、タイプをそれぞれテキストとパスワードに設定します。
非表示にするには、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>知らせ
この方法は、 Google
Firefox ブラウザと互換性がありません
方法 3
ブラウザがパスワードを自動的に正しく識別できないように、パスワード ボックスのタイプをテキストとして定義します。
イベントを入力ボックスにバインドし、データが入力されるたびにイベントをトリガーし、パスワードをドットに置き換えます。
入力ボックスの右側にある小さな目にイベントを手動でバインドして、パスワードの表示と非表示を制御します。
特定のコード
<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("登录成功");
}
}知らせ
この方法は、 Google
Firefoxブラウザと互換性があります
これまでのところ、ローカルテストでは問題は見つかっていません
記事に間違いがありましたら、ぜひ皆さんから質問していただければ幸いです。分からない場合はコメントしていただければ一つ一つ返信させていただきます。
もしこの記事が皆様のお役に立てましたら、高評価をして励ましていただければ幸いです、今後一緒に仕事をするまでの道のりは長く険しいと思います。