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

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

使用方法
まず以下のようなフォームがあったとします。
<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>


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

sponsors

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

記事作成:
記事URL:

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