HTML で用意されているパスワード入力に input type="password" があるのですが、 この入力では通常入力内容が ●●●●… と表示されます。
これを見える様にしたいと思います。
よくあるのはパスワード入力の下にチェックボックスを設置し、チェックされていない時は通常で、 チェックされた場合に内容を表示させるやり方です。
方法はパスワード入力の type 属性を password から text に変更します。 これで input がパスワード入力から普通のテキスト入力に変わり、入力内容が見えることになります。
■チェックボックスの変化時にパスワード入力を可視化
<html>
<head>
<meta charset="utf-8">
<title>test canvas</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function() {
//チェックボックスの変化時関数
$("#password-check").change(function() {
if ($(this).prop("checked")) {
//チェックONの場合
$("#password-test").attr("type","text");
} else {
//チェックOFFの場合
$("#password-test").attr("type","password");
}
});
});
</script>
</head>
<body>
<h2>test password</h2>
<input type="password" id="password-test" name="Password" value="" placeholder="パスワード入力" /><br />
<label>パスワードを表示する<input type="checkbox" id="password-check" /></label>
</body>
</html>
以下のパスワード入力に文字を入れてみて下さい。 その後で、チェックボックスをON／OFFすることでパスワードの中身が見えると思います。
PR
コメント