[JS]フォームに入力したパスワードを可視化するスクリプト -Show Password
Post on:2010年8月11日
sponsors
フォームに入力したパスワードをユーザーのボタンクリック操作で可視化するスクリプトを紹介します。
jQuery Show Password Plugin
デモページ
実装は既存のフォームにも簡単に組み込めます。
HTML
デモのHTMLはシンプルです。
可視化は、パスワードのclass名を参照しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<textarea name="code" class="html" cols="60" rows="5"> <form action="#"> <ol class="forms"> <li> <label for="username">Username</label> <input type="text" id="username" /> </li> <li> <label for="password">Password</label> <input type="password" id="password" class="password" /> </li> <li class="buttons"> <button type="submit">Submit</button> </li> </ol> </form> </textarea> |
CSS
CSSではフォームのスタイル以外に、可視化ボタンのスタイルをします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<textarea name="code" class="css" cols="60" rows="5"> .forms li { position: relative; } .show-password-link { display: block; position: absolute; z-index: 11; } .password-showing { position: absolute; z-index: 10; } </textarea> |
JavaScript
jquery.jsと当スクリプトを外部ファイルにし、下記のスクリプトを記述します。
パスワードに記述したclass名を指定します。任意のものも使用できます。
|
1 2 3 4 5 |
<textarea name="code" class="js" cols="60" rows="5"> $(document).ready(function() { $(':password').showPassword(); }); </textarea> |
スクリプトのオプションでは、可視化ボタンのclass名、表示・非表示、表示位置などが指定できます。
sponsors
