JavaScript パスワード入力文字を表示するサンプル

2022年10月11日

環境
Windows 10 home 64bit
Google Chrome 106.0.5249.103

構文
const 変数名1 = document.getElementById(パスワードのセレクタ名);
const 変数名2 = document.getElementById(チェックボックス名)
変数名2.addEventListener(“click",function() {
処理コード
}
addEventListenerメソッドでイベントリスナを登録しています
パスワード入力文字を表示します
変数名1.type ="text"
パスワード入力文字を非表示します
変数名1.type ="password"

使用例

<!DOCTYPE html>
<html>
<body>

<input type="password" value="1234abc" id="passwd" maxlength="10" />
<p><input type="checkbox" id="chks" />表示</p>
<script>
    const pwd = document.getElementById("passwd");
  
    const chks = document.getElementById("chks");
    //addEventListenerメソッドでイベントリスナを登録
   chks.addEventListener("click",function(){
    if (chks.checked) {
      //typeにtextにセット
      pwd.type = "text";
    } else {
      //typeにpasswordにセット
       pwd.type = "password";
       }
     });

</script>

</body>
</html>

実行結果
チェックボックス「表示」にチェックを入れるとパスワード入力文字を表示します。
チェックボックスを外すと非表示になります。

JavaScript

Posted by arkgame

関連記事: