サイト制作に関するメモ書き

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

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の入力内容を確認するデモページ
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP