JavaScriptでパスワードの可視性切り替え（表示・非表示）を実装する方法

この記事の内容は、JavaScript でパスワードの表示と非表示を切り替える方法についてです。必要な方は参考にしていただければ幸いです。

# フロントエンドのパスワードの可視性切り替え (表示と非表示) の効果はおそらく誰もが目にしたことがあるはずなので、これ以上は言いません。

デフォルトでは、入力されたパスワードの入力タグは type="password" であり、デフォルトのパスワードはドットまたはアスタリスクで表されます。パスワードを表示するには、タイプを「テキスト」に変更する必要があります。この効果は、Chrome や FireFox などのブラウザで input タグの type 属性を変更することで簡単に実現できますが、IE ではエラーが報告されます。 IE との互換性が必要な場合は、他のオプションを検討する必要があります。

ここで注意すべき点がいくつかあります。

この例では、入力タグ スキーム全体の置換を使用しているため、IE と互換性があります

視力検査表はアイコンフォントを使用しています, そのため、CSS の切り替えは比較的簡単です。

IE10 ブラウザでは、パスワード入力ボックスが表示されると、クリックするとボックス内に小さな目のアイコンが表示されます。通常のテキスト入力ボックスの場合は、パスワードも表示されます。 IE10 に付属する 2 つの機能を有効にしたくない場合は、小さなバツ印をクリックしてテキスト ボックスに入力した内容をクリアします。

CSS コード:

input::-ms-clear {display:none;}
input::-ms-reveal {display:none;}

IE ブラウザ用のこれら 2 つの CSS 定義により、IE ブラウザの自動テキスト消去機能とパスワード表示機能を削除できます。

上記は、JavaScript がパスワードの表示/非表示の切り替え (表示と非表示) を実装する方法の完全な紹介です。JavaScript チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

以上がJavaScriptでパスワードの可視性切り替え（表示・非表示）を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。