パスワード表示切替
パスワード入力欄の伏せ字を、目のアイコンを押すたびに表示と非表示で切り替えるパーツです。仕組みはシンプルで、ボタンを押すたびに input の type を password と text の間で入れ替えているだけです。これだけで入力中の値を確認したり、また隠したりできます。
解説
パスワード入力欄の伏せ字を、目のアイコンを押すたびに表示と非表示で切り替えるパーツです。仕組みはシンプルで、ボタンを押すたびにinputのtypeをpasswordとtextの間で入れ替えているだけです。これだけで入力中の値を確認したり、また隠したりできます。アイコンは絵文字ではなくインラインSVGなので、どの環境でも同じ見た目で表示されます。
導入したい場面
- 会員登録やログインのパスワード欄
- 新しいパスワードの設定・再設定画面
- APIキーなど打ち間違えたくない秘匿文字列の入力
入力欄とボタンをflexで横並びにし、枠線を親側にまとめて一体感のある見た目にしています。打ち間違い防止には有効ですが、人目のある場所では表示したままにしないよう、初期状態は必ず非表示にしておきます。aria-labelを付けてあるので読み上げでも用途が分かりますが、状態に応じて「表示する／隠す」とラベルを切り替えると、いまどちらかがより明確に伝わります。
よくある質問
JavaScriptは必須ですか。
はい。ボタンを押したときに input の type を password と text で切り替える処理にJSを使っています。この数行がないと表示の切り替えができません。
最初から文字を見える状態で表示できますか。
input の type を最初から text にすれば表示状態で始まりますが、パスワード欄は人目に触れる場合があるため、初期は password のまま隠しておくことを推奨します。