iPhoneのようなパスワード入力表示にするスクリプト[js]

設置方法は、ダウンロードファイルに含まれている「iPhonePassword.js」、「jQuery.dPassword.js」と「jQuery」をhead要素の範囲以内に設置して、下記のソースのようにマークアップしていくだけです。

HTML

<form action="#" id="login-form-1">
  <div>
      <label for="user-password">Password</label>
      <input type="password" id="user-password" name="user-password" />
  </div>
</form>

CSS

#login-form-1 div {
   position: relative;
}
#login-form-1 div #letterViewer {
   display: none;
   position: absolute;
   left: 240px;
   top: -30px;
   width: 100px;
   font: bold 72px Helvetica, Sans-Serif;
}

JavaScript

$(function() {
    $("#login-form-1 div").append("<div id='letterViewer'>");
    $("#user-password").keypress(function(e) {
        $("#letterViewer")
            .html(String.fromCharCode(e.which))
            .fadeIn(200, function() {
                $(this).fadeOut(200);
            });
    });
});