Vue はブラウザのパスワード記憶機能を無効にするサンプル コードを実装します

Vue はブラウザのパスワード記憶機能を無効にするサンプル コードを実装します

情報を探す

インターネットで見つかったいくつかの方法:

  • autocomplete="off" を使用します (多くの最新ブラウザではサポートされていません)
  • autocomplete="new-password" を使用します
  • 実際のアカウントとパスワードボックスの前に同じ名前の入力ボックスを追加します
  • 読み取り専用属性を使用し、フォーカスされたら削除する
  • 入力ボックスの type 属性をテキストに初期化し、フォーカスされたときにパスワードに変更します。
  • type="text" を使用して、テキスト ボックスの内容を手動でアスタリスク「*」またはドット「●」に置き換えます。

実装プロセス

使用されるフィールド

データ() {
 戻る {
   ユーザー名: ''、
    パスワード: ''、
  }
}

最近のブラウザは 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;
  }
}

自信を持ってプロジェクトの同僚に送ったのですが、失敗に終わりました。現場の環境は次の通りでした。

  • オペレーティング システム: Windows 7、Windows 10
  • ブラウザ: Chrome v74.0.3729.108

同じバージョンの 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をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • フロントエンドのvue+elementUIでパスワード記憶機能を実装する方法
  • Vue+要素+クッキーパスワード記憶機能の簡単な実装方法
  • Vue で Cookie と crypto-js を使用してパスワードを記憶し、暗号化する方法
  • Vue でパスワード機能を記憶するために sessionStorage を使用する
  • Vue プロジェクトは、クッキーにパスワードを記憶する機能を実装します (ソースコード付き)

<<:  MySQL の準同期レプリケーションについての簡単な説明

>>:  Linux 向けの強化されたスクリーンショットと共有ツール: ScreenCloud

推薦する

Vue はチャット ボックスで絵文字を送信する機能を実装します

vueチャットボックスで絵文字を送信し、vueインターフェースで絵文字を送信するための具体的なコード...

画像ソーシャルネットワーキングサイトのUIアプリケーションの比較分析(図)

私たちの生活、仕事、勉強において、ソーシャル ネットワークは徐々に将来のインターネット発展のトレンド...

MySQL Community Server 5.7.16 のグリーン バージョンをインストールしてリモート ログインを実装する方法

1. MySQL Community Server 5.7.16をダウンロードしてインストールします...

この記事では、Vueのフロントエンドページングとバックエンドページングを実装する方法を説明します。

目次1: フロントエンドの手書きページング(データ量が少ない場合) 2: バックエンドのページング、...

webpackでvue環境を構築する際の異常なエラーを解決する

目次まず、package.jsonを設定します次にwebpackツールをインストールしますwebpa...

HTML のセルパディングとセルスペース属性を図で説明します

セル - 表の内容 セルの余白 (表の余白) (cellpadding) - セルの外側の距離を表し...

Linux ディスク管理 LVM の使用

1. LVM の概要Linux ディスクを管理するときに、このような状況に遭遇することがよくあります...

HTMLの空リンクの役割についての簡単な説明

空のリンク:つまり、ターゲット エンドポイントとのリンクはありません。フォーマット <a hr...

ウェブ クラスターの Docker Stack 展開方法の手順

Docker はますます成熟し、その機能もますます強力になっています。 Docker Stack を...

HTML で vue-router を使用するサンプル コード

vue と vue-router の紹介 <script src="https://...

Vue の nextTick について話す

データが変更されても、DOM ビューはすぐには更新されません。変更直後にノードまたはその値を取得しよ...

Linux カーネル デバイス ドライバー Linux カーネル 基本メモの概要

1. Linuxカーネルドライバモジュールの仕組み静的ロードでは、ドライバモジュールをカーネルにコン...

MySQL データベースの Binlog 使用法の概要 (必読)

MySQL データベースにとって binlog バイナリ ログがどれほど重要であるかについては詳し...

MySQL での r2dbc の使用に関する詳細な理解

導入MySQL は、私たちが日常業務で使用する非常に一般的なデータベースです。MySQL は現在 O...

ページデザインにおけるテーブルとdivの適切な適用についての簡単な説明

この記事の冒頭で、以前書いた入門記事の間違いを訂正したいと思います。初心者を再び誤解させないように、...