JSでパスワードの表示・非表示をする

JavaScript

Posted at 2025-03-29

ユーザーが入力したパスワードを、"*****" のような隠された形で表示する。
Lock Password をクリックすると、input タグに入力することができなくなり、
さらにそのパスワードを lockedPassDiv に表示する処理を作成

html

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<div class="m-2">
    <div class="col-12">
        <label for="passwordClick">Password</label>
        <input id="passwordClick" type="password">
    </div>
    <div class="col-12">
        <label for="passwordClickCheck">Show/Hide Password</label>
        <input type="checkbox" id="passwordClickCheck" onclick="passwordToggle()">
    </div>
    <div class="col-12">
        <!-- onclick -->
        <button onclick="lockPass()">Lock Password</button>
    </div>
    <h3 class="mt-5">Password</h3>
    <div id="lockedPassDiv" class="col-12">

    </div>
</div>

function passwordToggle(){
    const pass = document.getElementById("passwordClick");
    pass.type = pass.type === "password" ? "text" : "password";
}

function lockPass(){
    const pass = document.getElementById(`passwordClick`);
    const target = document.getElementById("lockedPassDiv");

    // パスワードがなければescape
    if(pass.value === "") return;

    // disable属性をtrueに設定することによってpasswordをロック
    pass.disabled = true;

    const p = document.createElement("p");
    p.innerHTML = pass.value;

    // 入力されたpasswordをdivに追加
    target.append(p);
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up