パスワード表示切替インプット
パスワード表示切替インプットは、入力欄の右側にアイコンボタンを置き、押すたびに伏せ字と平文を切り替えられるフォーム部品です。JavaScript は入力欄の type を password と text の間で入れ替えるだけのごく短い処理で、同時に目アイコンの表示と aria-label の文言も「表示」「隠す」へ…
解説
パスワード表示切替インプットは、入力欄の右側にアイコンボタンを置き、押すたびに伏せ字と平文を切り替えられるフォーム部品です。JavaScript は入力欄の type を password と text の間で入れ替えるだけのごく短い処理で、同時に目アイコンの表示と aria-label の文言も「表示」「隠す」へ切り替えます。枠線とアイコンを display:flex で 1 行にまとめ、focus-within ではなく入力欄側の outline:none で見た目を整えています。
導入したい場面
- 会員登録やログイン画面で入力ミスを減らしたいとき
- パスワード再設定フォームなど、確実に正しい文字列を入れてほしい場面
- スマホでタイプミスが起きやすい長いパスワード入力
アイコンは SVG の stroke 色を変えれば配色を合わせられ、ボタンには type="button" を付けてフォーム送信が走らないようにしています。アクセシビリティ上の要点は、切替時に aria-label を更新して現在の状態を読み上げられるようにすることです。なお平文表示中は肩越しの覗き見に注意が必要なので、共有端末では既定で伏せ字に戻す配慮も有効です。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
ボタンを押しても表示が切り替わりません
ボタンに type=button が付いていないとフォーム送信が走り、入力欄の状態がリセットされる場合があります。ボタンの type と、入力欄・ボタンの id が JavaScript の取得名と一致しているか確認してください。
目のアイコンを別のデザインに変えられますか
アイコンはインライン SVG なので、表示用と非表示用の path を好みのものに差し替えれば変更できます。線の太さや色は SVG の stroke 属性で調整します。