入力を明らかにするパスワードのオプション

HTMLは、パスワードを特別に処理する入力タイプを提供します。

<input type="password">

このタイプでは、入力時にぼやけとして表示されるポイント：

••••••••••

これは、セキュリティを強化するためにWebページが取る尺度です。この機能がなければ、他の人が覗き込んでパスワードを簡単に取得することは簡単です。

ただし、ユーザーエクスペリエンスも常に改善されており、通常はオプションがあります。

passsibleパスワードを表示しますか？

これにより、ユーザーはパスワードを表示するかどうかを選択できます。ほとんどのユーザーは、パスワードを入力する前に周りを見回し、誰も覗いていないことを確認し、パスワードを正しく入力したことを確認し、間違ったパスワードを複数回入力することで引き起こされる問題を回避することを選択します。

それで、それを達成する方法は？

方法1：javascriptを使用してtype="password"とtype="text"を切り替えます

これは、すべてのブラウザーで正常に動作するため、現時点で最も一般的に使用されている方法です。

 const input = document.queryselector（ "。パスワード入力"）;
//チェックボックスが選択されたとき...
if（input.getAttribute（ "type"）=== "パスワード"）{
  input.setattribute（ "type"、 "text"）;
} それ以外 {
  input.setattribute（ "type"、 "password"）;
}

この方法の問題は、入力タイプを変更してパスワード表示/非表示のパスワードを実装する必要があることです。これは少し奇妙に思えます。さらに重要なことは、パスワードマネージャーツールと競合する可能性があることです。入力タイプを変更すると、パスワードマネージャー（ブラウザの組み込みパスワードマネージャーを含む）が認識されていないか、パスワードを自動的に入力する場合があります。

方法2：CSSで-webkit-text-securityを使用します

このプロパティは一部のブラウザでのみ有効であるため、これは実行可能なソリューションではありません。しかし、誰かがかつてこの機能をCSSに移行したいと思っていたことは明らかです。

 input [type = "password"] {
  -webkit-text-security：square;
}
form.show-passwords input [type = "password"] {
  -webkit-text-security：none;
}

方法3：CSSのinput-securityを使用します

現在input-securityのための編集仕様のドラフトがあります。それは本質的にトグル値です。

 form.show-passwords input [type = "password"] {
  入力セキュリティ：なし;
}

この方法は簡潔で明確です。しかし、ブラウザはまだサポートしていません。したがって、現在は方法1のみを使用できます。

デモ（すべての方法）

以上が入力を明らかにするパスワードのオプションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。