input passwordの入力内容を確認できるようにする

input passwordは入力した内容が「・・・」のように隠されて表示されます。
色々なサイトのフォームを見ているとたまに見かけるのですが、input passwordの表示を「・・・」と実際の入力内容で切り替えられるチェックボックスを実装してみます。

サンプルコード

パスワード入力エリアにid=”password”、表示を切り替えるチェックボックスにid=”password-check”を指定します。

HTML

パスワード: <input type="password" id="password" />
<input type="checkbox" id="password-check" />パスワードを表示する

チェックが入った時にtype=”password”をtype=”text”に変更するようにします。

JavaScript

var pw = document.getElementById('password');
var pwCheck = document.getElementById('password-check');
pwCheck.addEventListener('change', function() {
	if(pwCheck.checked) {
		pw.setAttribute('type', 'text');
	} else {
		pw.setAttribute('type', 'password');
	}
}, false);

これでチェックを入れたときに入力内容を確認できるようになりました。
input passwordの入力内容を確認するデモページ