パスワード入力を求める画面においてパスワードの表示/非表示切り替えが一般的になってきています。スマホでパスワードを正確にタイプすることは非常に困難であり、キーを間違えてしまいがちです。
パスワードのスペルを間違えたかどうかをすばやく示すためのボタンがあると便利ということで、その実装サンプルをご紹介します。
表示サンプル
例1（チェックボックス）
パスワード入力ボックスの下にあるチェックボックスをオンにすると、パスワードが表示されるサンプルです。
チェックボックスを切り替えると、JavaScriptでパスワードフィールドのtype属性をpasswordからtextに変わります。
パスワード非表示
パスワード表示
HTML
<input type="password" class="field" id="password" value="hogehoge">
<input type="checkbox" id="password-check">
パスワードを表示する
javascript
<script>
const pwd = document.getElementById('password');
const pwdCheck = document.getElementById('password-check');
pwdCheck.addEventListener('change', function() {
if(pwdCheck.checked) {
pwd.setAttribute('type', 'text');
} else {
pwd.setAttribute('type', 'password');
}
}, false);
</script>
例2（ボタン）
パスワードフィールド内にボタンを表示し、ボタンをクリックするとパスワードが表示されるサンプルです。
同様に、ボタンを押すとJavaScriptでパスワードフィールドのtype属性をpasswordからtextに変わります。
パスワード非表示
パスワード表示
HTML
<div class="toggle">
<input class="field js-password" id="password2" type="password" value="hogehoge" placeholder="パスワードを入力" autocomplete="off" required="required">
<div class="btn">
<input class="btn-input js-password-toggle" id="eye" type="checkbox">
<label class="btn-label js-password-label" for="eye"><i class="fas fa-eye"></i></label>
</div>
</div>
javascript
<script>
const passwordToggle = document.querySelector('.js-password-toggle');
passwordToggle.addEventListener('change', function () {
const password = document.querySelector('.js-password'),
passwordLabel = document.querySelector('.js-password-label');
if (password.type === 'password') {
password.type = 'text';
passwordLabel.innerHTML = '<i class="fas fa-eye-slash"></i>';
} else {
password.type = 'password';
passwordLabel.innerHTML = '<i class="fas fa-eye"></i>';
}
password.focus();
});
</script>
