JavaScript パスワード入力文字を表示するサンプル
環境
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>
実行結果
チェックボックス「表示」にチェックを入れるとパスワード入力文字を表示します。
チェックボックスを外すと非表示になります。