Parallels Desktop 15% OFFセール中 3月1日までClick!

【JavaScript】パスワードの表示・非表示を切り替える方法

JavaScriptでパスワードの表示・非表示の切り替え

セキュリティと利便性のバランスはウェブデザインにおいて永遠のテーマである。そう言ったのはアリストテレスだったでしょうか。←違います。

フォームのパスワード入力欄に文字列を入力するとセキュリティの関係で黒い点々で表示されるわけですが、入力したパスワードを目で見て確認したいこともありますよね。

そこで、この記事ではJavaScriptを使ってパスワードの表示・非表示を切り替える方法を解説します。jQueryは使わずにVanilla JSで参ります。

目次

チェックボックスでパスワードの表示・非表示を切り替える

チェックボックスのON/OFFでパスワードの表示を切り替える例です。

動作サンプルとコード

コードの解説

  • 1行目: (HTML) パスワード入力欄。id属性で一意な名前をつける。
  • 3,4行目: (HTML) 表示を切り替えるためのチェックボックス。id属性で一意な名前をつける。
  • 7行目: (JS) パスワード入力欄の要素を変数に代入。
  • 8行目: (JS) チェックボックスの要素を変数に代入。
  • 10行目: (JS) チェックボックスが変更されたら、以下の処理を実行。
    • 11行目: (JS) チェックボックスがチェックされていたら、
      • 12行目: (JS) パスワード入力欄のtype属性をtextに変更する。
    • 13行目: (JS) それ以外(チェックボックスがチェックされていない)ならば、
      • 14行目: (JS) パスワード入力欄のtype属性をpasswordに変更する。

ボタンでパスワードの表示・非表示を切り替える

ボタンのクリックでパスワードの表示・非表示を切り替える例です。

動作サンプルとコード

コードの解説

  • 4行目: (CSS) ボタンの横幅を固定。表示・非表示の切り替えでボタンの大きさが変わらないようにするため。
  • 8行目: (HTML) パスワード入力欄。id属性で一意な名前をつける。
  • 9行目: (HTML) 表示を切り替えるためのボタン。id属性で一意な名前をつける。
  • 12行目: (JS) パスワード入力欄の要素を変数に代入。
  • 13行目: (JS) ボタンの要素を変数に代入。
  • 14行目: (JS) パスワードの表示状態を判別するための変数passwordVisibleに初期値としてfalseを代入。非表示中という意味。
  • 16行目: (JS) ボタンがクリックされたら、以下の処理を実行。
    • 17行目: (JS) ボタンが押されたときのデフォルトの動作をキャンセル。ボタンを押してもフォームが送信されないようにする。
    • 18行目: (JS) パスワードが表示中ならば、
      • 19行目: (JS) パスワード入力欄のtype属性をpasswordに変更し、
      • 20行目: (JS) ボタンの内容を表示に変更し、
      • 21行目: (JS) passwordVisible変数をfalse(非表示)に変更する。
    • 22行目: (JS) それ以外(パスワードが非表示中)ならば、
      • 23行目: (JS) パスワード入力欄のtype属性をtextに変更し、
      • 24行目: (JS) ボタンの内容を非表示に変更し、
      • 25行目: (JS) passwordVisible変数をtrue(表示)に変更する。

目のアイコンでパスワードの表示・非表示を切り替える

目のアイコンをクリックしてパスワードの表示・非表示を切り替える例です。アイコンはFont Awesomeを使います。

動作サンプルとコード

コードの解説

  • 3行目: (HTML) ヘッダでFont AwesomeのCSSを読み込む。
  • 5-8行目: (CSS) 目のアイコンの位置を左にずらす。アイコンが入力欄の中にあるように見せるため。
  • 9-12行目: (CSS) 入力欄の右に適度なpaddingを入れる。入力したパスワードとアイコンが重ならないようにするため。box-sizing: border-box;とすると、paddingを変更しても入力欄の幅が変わらない。
  • 16行目: (HTML) パスワード入力欄。id属性で一意な名前をつける。
  • 17行目: (HTML) 表示を切り替えるための目のアイコン。id属性で一意な名前をつける。classfa-fwを指定して横幅を固定する。
  • 20行目: (JS) パスワード入力欄の要素を変数に代入。
  • 21行目: (JS) アイコンの要素を変数に代入。
  • 22行目: (JS) パスワードの表示状態を判別するための変数passwordVisibleに初期値としてfalseを代入。非表示中という意味。
  • 24行目: (JS) アイコンがクリックされたら、以下の処理を実行。
    • 25行目: (JS) パスワードが表示中ならば、
      • 26行目: (JS) パスワード入力欄のtype属性をpasswordに変更し、
      • 27行目: (JS) アイコンのclass属性からfa-eye-slashを削除し、
      • 28行目: (JS) アイコンのclass属性にfa-eyeを追加し、
      • 29行目: (JS) passwordVisible変数をfalse(非表示)に変更する。
    • 30行目: (JS) それ以外(パスワードが非表示中)ならば、
      • 31行目: (JS) パスワード入力欄のtype属性をtextに変更し、
      • 32行目: (JS) アイコンのclass属性からfa-eyeを削除し、
      • 33行目: (JS) アイコンのclass属性にfa-eye-slashを追加し、
      • 34行目: (JS) passwordVisible変数をtrue(表示)に変更する。
プログラミング学習、お疲れさまです

プログラミングの独学に行き詰まっていませんか?誰かに相談したい、もっと効率よく学びたいなら、プログラミングスクールを検討してみてください。

さいごに

セキュリティと利便性を両立させたパスワード入力欄が作れるようになりました。アリストテレスもあの世で納得しているのではないでしょうか。

でわでわ

JavaScriptでパスワードの表示・非表示の切り替え

この記事が気に入ったら
いいね または フォローしてね!

シェアしてね

コメント

コメントする

目次