プレーンJavaScriptを使用したパスワード表示の切り替え方法

概要: このチュートリアルでは、プレーンJavaScriptを使用してパスワード入力の表示/非表示を切り替える方法を学習します。

パスワードフィールドは、実際の文字ではなく*文字を表示することで、ユーザーが安全にパスワードを入力できるようにする手段を提供します。

しかし、誤ったパスワードを入力してしまうユーザーもいる可能性があります。ユーザーが現在入力しているパスワードを確認できるようにするため、パスワードの表示/非表示を切り替えることができるボタンを追加できます。

パスワードを表示するには、次の手順に従います。

まず、<input>要素をpasswordタイプで作成し、ユーザーがクリックしてパスワードの表示/非表示を切り替えることができるアイコンを作成します。
次に、アイコンのクリックイベントにイベントハンドラーをバインドします。アイコンをクリックすると、パスワードフィールドのtype属性をtextとpasswordの間で切り替えます。textタイプの入力では、実際のパスワードが表示されます。
第三に、よりユーザーフレンドリーにするためにアイコンを変更します。この手順はオプションです。

簡単にするために、パスワードの表示/非表示を切り替えるためにBootstrapアイコンの2つのアイコンを使用します。

以下は、ページのHTMLコードを示しています。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Toggle Password Visibility</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
    <link rel="stylesheet" href="css/style.css" />
</head>

<body>
    <div class="container">
        <h1>Sign In</h1>
        <form method="post">
            <p>
                <label for="username">Username:</label>
                <input type="text" name="username" id="username">
            </p>
            <p>
                <label for="password">Password:</label>
                <input type="password" name="password" id="password" />
                <i class="bi bi-eye-slash" id="togglePassword"></i>
            </p>
            <button type="submit" id="submit" class="submit">Log In</button>
        </form>
    </div>
    <script>
        const togglePassword = document.querySelector("#togglePassword");
        const password = document.querySelector("#password");

        togglePassword.addEventListener("click", function () {
            // toggle the type attribute
            const type = password.getAttribute("type") === "password" ? "text" : "password";
            password.setAttribute("type", type);
            
            // toggle the icon
            this.classList.toggle("bi-eye");
        });

        // prevent form submit
        const form = document.querySelector("form");
        form.addEventListener('submit', function (e) {
            e.preventDefault();
        });
    </script>
</body>

</html>Code language: HTML, XML (xml)

HTMLページには、passwordタイプの入力要素と、Bootstrap CSSによって提供されるCSSクラスを持つ<i>要素があります。

Bootstrap CSSを使用すると、<i>要素のbi-eyeクラスを使用して目のアイコンを表示できます。アイコンを目から斜めの目に変更するには、<i>要素のクラスをbi-eye-slashに変更するだけです。

アイコンをパスワード入力内に配置するには、次のように<i>要素に負のマージンを使用できます。

form i {
    margin-left: -30px;
    cursor: pointer;
}Code language: CSS (css)

残りのCSSは簡単です。

JavaScriptでは

まず、querySelector()メソッドを使用して、パスワード切り替えアイコンとパスワード入力フィールドを選択します。

const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#password');Code language: JavaScript (javascript)

次に、togglePasswordアイコンにイベントリスナーをアタッチし、パスワードフィールドのtype属性とアイコンのクラスを切り替えます。

togglePassword.addEventListener('click', function (e) {
    // toggle the type attribute
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    // toggle the eye / eye slash icon
    this.classList.toggle('bi-eye');
});Code language: JavaScript (javascript)

ページ全体を表示するには、こちらで確認できます。

このチュートリアルは役に立ちましたか？