情報を探すインターネットで見つかったいくつかの方法:
実装プロセス使用されるフィールド データ() { 戻る { ユーザー名: ''、 パスワード: ''、 } } 最近のブラウザは autocomplete="off" をサポートしなくなったため、パスワード ボックスの設定をあきらめて、autocomplete="new-password" を直接使用しました。Chrome (v88.0.4324.104)、Edge (v88.0.705.56)、Firefox (v67) で動作することをテストしましたが、Firefox (v85) ではパスワードを思い出すように求められます。 <el-input v-model="ユーザー名" type="text" name="text" placeholder="アカウント" autocomplete="オフ"><i slot="プレフィックス" class="el-input_icon el-icon-user"></i></el-input> <el-input v-model="password" type="password" name="pwd" id="pwd" placeholder="password" autocomplete="新しいパスワード"></el-input> 参照: https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/フォームの自動補完をオフにする https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#browser_compatibility Firefox の高バージョンプロンプトを解決する過程で、方法 3/4/5 を試しましたが、結果は満足のいくものではありませんでした。ただし、Firefox の最終パスワード ボックスの値がアスタリスク「*」または小さなドット「●」である限り、パスワードを記憶するように要求されないことがわかりました (正しいかどうかはわかりません。自分でテストできます)。そこで、入力ボックスを関連付けるために新しいフィールド pwdCover を追加し、password を使用して実際に値を渡します。 寺院 <el-input v-model="ユーザー名" type="text" name="text" placeholder="アカウント" autocomplete="オフ"><i slot="プレフィックス" class="el-input_icon el-icon-user"></i></el-input> <el-input v-model="pwdCover" type="password" name="pwd" id="pwd" placeholder="password" autocomplete="new-password"@input="setPassword"></el-input> スクリプト データ() { 戻る { ユーザー名: ''、 パスワード: ''、 pwdカバー: '', } }, 方法: ログイン() { this.pwdCover = this.pwdCover.replace(/\S/g, '●'); // ログイン要求、失敗した場合は pwdCover を復元 this.pwdCover = this.password; }, パスワードを設定する(val) { this.password = val; } } 自信を持ってプロジェクトの同僚に送ったのですが、失敗に終わりました。現場の環境は次の通りでした。
同じバージョンの Google Chrome をインストールした後、問題は発生しませんでした。私のオペレーティング システムは Windows 10 です。何が問題だったのかわかりません。最終的に、方法 6 を選択しました。 ファイナル寺院 <el-form-item> <el-input v-model="ユーザー名" type="text" name="text" placeholder="アカウント" autocomplete="オフ"><i slot="プレフィックス" class="el-input_icon el-icon-user"></i></el-input> </el-form-item> <el-form-item> <el-input v-model="pwdCover" type="text" name="pwd" id="pwd" placeholder="パスワード" autocomplete="off" @input="setPassword"><i slot="prefix" class="el-icon-lock"></i></el-input> </el-form-item> スクリプト パスワードを設定する(val) { 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)) { インデックス = idx; 最後の文字 = el; } }); // 入力文字が仕様を満たしているか確認します。満たしていない場合は文字を削除します if(lastChar && !reg.test(lastChar)) { カバーArr.splice(インデックス、1); this.pwdCover = coverArr.join(''); 戻る; } (実長<カバー長)の場合{ // 新しい文字を追加します realArr.splice(index, 0, lastChar); } そうでない場合 (coverLen <= realLen && index !== -1) { // 文字を置換します(直接置換する文字を 1 つ以上選択します) realArr.splice(インデックス、realLen - (coverLen - 1)、lastChar); } それ以外 { // 文字を削除します。val がすべて ● なので、一致させる方法がありません。文字が末尾から削除されるのか、途中から削除されるのかわかりません。数文字削除した後のパスワードの取り扱いは困難です。そのため、カーソルの位置と val の長さで判断できます。let pos = document.getElementById('pwd').selectionEnd; // カーソルの位置を取得します。realArr.splice(pos, realLen - coverLen); } // pwdCoverを this.pwdCover = val.replace(/\S/g, '●'); this.password = realArr.join(''); }, ブラウザのパスワード記憶を禁止する機能をVueで実装するためのサンプルコードに関するこの記事はこれで終わりです。ブラウザのパスワード記憶を禁止するVueに関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL の準同期レプリケーションについての簡単な説明
>>: Linux 向けの強化されたスクリーンショットと共有ツール: ScreenCloud
目次序文接続管理追加の接続管理ポート要約する序文皆さんの多くは、次のようなエラー メッセージに遭遇し...
sudo コマンドを使用すると、信頼できるユーザーは別のユーザー (デフォルトでは root ユーザ...
1. MySQLデータベースのエンコーディングを確認する mysql -u ユーザー名 -p パスワ...
どの要素でもスクロールできるようにしながら、スクロールバーを非表示にするにはどうすればよいでしょうか...
tomcat9をアンインストールする1. Tomcatのインストールはディレクトリに解凍するだけで...
MySQL 一時テーブルは、一時的なデータを保存する必要がある場合に非常に便利です。一時テーブルは現...
1. 今日の午後、コースの要件により、Ubuntu で FTP サーバーを設定する実験を行う必要が...
理由nacos の pom が依存する mysql バージョンが、mysql バージョンと一致してい...
この記事では、WeChatミニプログラムで電子署名を実装するための具体的なコードを参考までに紹介しま...
マルチ選択は、すべてのオプションを一覧表示し、ユーザーが Ctrl/Shift キーを使用して複数選...
1. Javaプロジェクトをjarパッケージにパッケージ化するここではMavenツールを使用します...
SELECT ステートメントの完全な構文は次のとおりです。 (7)選択 (8) DISTINCT ...
目次1. 準備2. 説明計画の概要3. フィールドの詳細な説明4. パーティションクエリにはパーティ...
仕事上の理由により、完全なオンライン化(つまり、すべてのデータがオンラインで完了し、インポートや...
この記事では ソースコードのオンラインプレビューとダウンロード今日のチュートリアルでは、円のホバー効...