JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでパスワードの表示・非表示を切り替える方法をわかりやすく解説

ログインフォームや会員登録フォームでは、入力したパスワードを目視確認できるように「表示切り替え」ボタンやチェックボックスが用意されていることが一般的です。実はこの機能、JavaScriptを使えばごくシンプルなコードで実装できます。

仕組みの基本

パスワード入力欄（<input>要素）のtype属性は、通常「password」に設定されており、入力内容が「●●●●」のようにマスクされて表示されます。チェックボックスがクリックされたタイミングで、このtype属性を「password」から「text」に書き換えれば入力内容が平文で表示され、逆に「text」から「password」に戻せば再びマスクされます。つまり、type属性の値を入れ替えるだけで表示切り替えが実現できるのです。

サンプルコード

以下は、チェックボックスのクリックでパスワードの表示・非表示を切り替える完全なHTMLファイルです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>パスワード表示切り替えのデモ</title>
</head>
<body>
    <h1>パスワード表示切り替えのデモ</h1>
    <p>パスワード：</p>
    <input type="password" value="abcd@1234" id="inputPass" /><br /><br />
    <label><input class="check" type="checkbox" />パスワードを表示する</label>

    <script>
        document.querySelector(".check").addEventListener("click", showPass);

        function showPass() {
            var inputPassEle = document.getElementById("inputPass");
            if (inputPassEle.type === "password") {
                inputPassEle.type = "text";
            } else {
                inputPassEle.type = "password";
            }
        }
    </script>
</body>
</html>

コードのポイント解説

1. イベントリスナーの登録

document.querySelector(".check") でチェックボックス要素を取得し、addEventListener("click", showPass) によって、クリックされたときに showPass 関数が呼び出されるよう設定しています。

2. type属性の判定と切り替え

getElementById("inputPass") でパスワード入力欄を取得し、現在のtype属性を条件分岐で判定します。

  • type属性が "password" の場合 → "text" に変更し、入力内容を平文で表示
  • それ以外の場合 → "password" に戻し、入力内容をマスク表示

このif文によるトグル処理によって、クリックするたびに表示・非表示が交互に切り替わります。

実行結果

上記のコードをブラウザで開くと、パスワード入力欄には初期値「abcd@1234」がマスクされた状態で表示されます。

JavaScriptでパスワードの表示・非表示を切り替える方法をわかりやすく解説

続いて、「パスワードを表示する」チェックボックスにチェックを入れてみましょう。

JavaScriptでパスワードの表示・非表示を切り替える方法をわかりやすく解説

チェックを入れるとtype属性が「text」に変更されるため、パスワードがそのまま文字列として表示されます。チェックを外せば、自動的に元のマスク表示へ戻ります。

まとめ

パスワードの表示切り替えは、input要素のtype属性を「password」と「text」の間で切り替えるだけで実装できる、非常にシンプルなテクニックです。チェックボックスの代わりに目玉アイコン型のボタンを使う場合も、クリックイベント内で同じ処理を行えば同様に動作します。ユーザーが入力ミスに気づきやすくなり、フォームの使い勝手向上にもつながるため、ぜひ実装してみてください。

  1. CSSとJavaScriptで「いいね／よくないね」ボタンを切り替える方法

    CSSとJavaScriptを組み合わせれば、クリックするたびに「いいね（サムズアップ）」と「よくないね（サムズダウン）」のアイコンが切り替わるボタンを簡単に実装できます。ここでは、Font AwesomeのアイコンとclassList.toggle()メソッドを使った具体的な実装例を紹介します。サンプルコード<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-aweso

  2. CSSとJavaScriptでダークモード／ライトモードを切り替える方法を解説！

    ダークモードとは？導入のメリット ダークモードは、夜間や暗い場所での閲覧時に目への負担を軽減できるうえ、有機EL（OLED）ディスプレイ搭載のスマートフォンやPCではバッテリー消費を抑えられる効果も期待できる、近年多くのWebサービスで標準となっている機能です。この記事では、CSSとJavaScriptを組み合わせて、ボタン操作ひとつでダークモードとライトモードを切り替える方法を、実際に動くサンプルコード付きで解説します。 切り替えの仕組み 実装の考え方は非常にシンプルです。まず、ライトモード（白背景・黒文字）のスタイルをbody要素のデフォルトとして定義し、ダークモード（黒背景・白文字）用の