入力したパスワードを表示するJavaScript「Password (un)Masking」

確認などもあるとパスワードに何を入力したかわからなる場合があります。
入力したパスワードを表示させることでユーザーにとってわかりやすくなるかと思います。
jQueryを利用した「Password (un)Masking | VileWorks」を紹介します。

sponsors

使用方法

まず以下のようなフォームがあったとします。

<form>
	パスワード:<input id="password" name="password" type="password" />
</form>
これに確認するためのチェックボックスをつけます。

<input id="showcharacters" name="showcharacters" type="checkbox" /> 確認する
次に、このチェックボックスにチェックが入った時に入力内容を表示させるためJavaScriptを利用します。
今回はjQueryを利用しますので、jquery.jsをダウンロードして下さい。
あとは、下記のように記述すれば完成です。

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){	
	$('#showcharacters').click(function() { //チェックボックスがクリックされたとき
		if ($(this).attr('checked')) { //もし、チェック状態であれば
			$('#password').replaceWith(
				'<input type="text" name="password" id="password" value="' + $('#password').attr('value') + '" />');
				//パスワードを表示
		} else { //チェックがなければ
			$('#password').replaceWith(
				'<input type="password" name="password" id="password" value="' + $('#password').attr('value') + '" />');
				//パスワードを隠す
		}
	});
});
</script>

サンプル

Password:
ちょっと確認する

sponsors


Javascriptサンプルページ一覧
skuare.net