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

2023年8月12日2023年9月5日

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

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

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

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

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

動作サンプルとコード

パスワードを表示する

<input type="password" id="password" name="password" />

<input type="checkbox" id="toggleCheckbox" />
<label for="toggleCheckbox">パスワードを表示する</label>

<script>
  const passwordField = document.getElementById('password');
  const toggleCheckbox = document.getElementById('toggleCheckbox');

  toggleCheckbox.addEventListener('change', function () {
    if (toggleCheckbox.checked) {
      passwordField.type = 'text';
    } else {
      passwordField.type = 'password';
    }
  });
</script>

コードの解説

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に変更する。

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

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

動作サンプルとコード

<html>
  <head>
    <style>
      #toggleButton {width: 6em;}
    </style>
  </head>
  <body>
    <input type="password" id="password" name="password" />
    <button id="toggleButton">表示</button>

    <script>
      const passwordField = document.getElementById('password');
      const toggleButton = document.getElementById('toggleButton');
      let passwordVisible = false;

      toggleButton.addEventListener('click', function (e) {
        e.preventDefault();
        if (passwordVisible) {
          passwordField.type = 'password';
          toggleButton.textContent = '表示';
          passwordVisible = false;
        } else {
          passwordField.type = 'text';
          toggleButton.textContent = '非表示';
          passwordVisible = true;
        }
      });
    </script>
  </body>
</html>

コードの解説

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を使います。

動作サンプルとコード

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
    <style>
      #toggleIcon {
        position: relative;
        left: -2.2em;
      }
      #password {
        box-sizing: border-box;
        padding-right: 2.4em;
      }
    </style>
  </head>
  <body>
    <input type="password" id="password" name="password" />
    <i id="toggleIcon" class="fa-solid fa-eye fa-fw"></i>

    <script>
      const passwordField = document.getElementById('password');
      const toggleIcon = document.getElementById('toggleIcon');
      let passwordVisible = false;

      toggleIcon.addEventListener('click', function () {
        if (passwordVisible) {
          passwordField.type = 'password';
          toggleIcon.classList.remove('fa-eye-slash');
          toggleIcon.classList.add('fa-eye');
          passwordVisible = false;
        } else {
          passwordField.type = 'text';
          toggleIcon.classList.remove('fa-eye');
          toggleIcon.classList.add('fa-eye-slash');
          passwordVisible = true;
        }
      });
    </script>
  </body>
</html>

コードの解説

3行目: (HTML) ヘッダでFont AwesomeのCSSを読み込む。
5-8行目: (CSS) 目のアイコンの位置を左にずらす。アイコンが入力欄の中にあるように見せるため。
9-12行目: (CSS) 入力欄の右に適度なpaddingを入れる。入力したパスワードとアイコンが重ならないようにするため。box-sizing: border-box;とすると、paddingを変更しても入力欄の幅が変わらない。
16行目: (HTML) パスワード入力欄。id属性で一意な名前をつける。
17行目: (HTML) 表示を切り替えるための目のアイコン。id属性で一意な名前をつける。classにfa-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（表示）に変更する。