jQuery でパスワードをチェックボックスで表示切替できるようにする
最近案件でパスワードを表示させる実装する機会があったのでのでそのメモです。jQuery を使って簡単なコードで実装できます。
See the Pen Show password by Megumi Hano (@featherplain) on CodePen.
- スタイルはフォーム含めて Foundation をあらかじめ読み込ませてあるので、CSS は最小限しか書いていません。
- HTML は Jade, CSS は SCSS で書いているので分かりにくいという方はそれぞれ [ VIEW COMPILED ] で HTML と CSS の記述を確認できます。
実装にあたって、古い記事ですがパスワードの表示/非表示をチェックボックスでスイッチできるようにするを参考にしました。
ただ、ログイン画面、ユーザ登録画面、さらにパスワード変更画面では2箇所必要ということで複数でも対応できるようにちょっと手を加える必要がありました。上記のデモはよくある「現在のパスワード」と「新しいパスワード」を入力させてバリデーションをかけるようなフォームを想定したものです。
ポイントは jQuery の each(callback) を使用したことと、 .js-pass 直下の子要素である .js-showpass にのみイベントが発火するようにしたことです。こうすることで、複数対応が可能となります。