ログイン時にパスワードを入力する際、通常セキュリティやのぞき見防止のため入力したパスワードが***だったり●●●と伏せ字に置き換えられます。セキュリティはある程度担保されますが、何をタイプしたのかわからないためAmazonやFacebook等では、パスワードの伏せ字と入力した文字の表示を切り替えられ、ユーザビリティを向上させています。今日はそれと似たような物を実装します。

• 入力フォームでパスワード⇔テキストを切り替えるサンプル

HTML

<label for="input_text_password">パスワード：<input type="text" id="input_text_password" name="input_text_password" placeholder="パスワード"><button type="button" id="btn_text_password">パスワード表示/非表示</button></label>

JavaScript

const inputPW = document.getElementById('input_text_password');
const btnPW = document.getElementById('btn_text_password');
btnPW.addEventListener('click', function(e) {
 if( inputPW.getAttribute('type') === 'password' ) {
  inputPW.setAttribute('type','text');
  } else {
  inputPW.setAttribute('type','password');
  }
});

input_text_passwordを指定したinput要素がパスワード入力欄で、btn_text_passwordを指定したbutton要素がパスワードの表示非表示を切り替えるボタンです。条件に応じてパスワード入力欄のtype属性値をpasswordかtextに切り替える…といったシンプルな実装です。

おしまい♥