パスワード入力欄の最後の文字列をヒントとして表示するjQueryプラグイン

IT Mediaの記事でパスワードの「****」は不要…という記事(以下参照)がありましたが、ブコメにiPhone UIが〜〜というのがあったので、じゃあということでついカッとなってjQueryプラグインを書いた。

Webサイトなどでパスワードを入力する際、「****」を使って入力した文字が見えないようにする必要はないのではないか——。そんな提案をめぐり、研究者が賛否両論を展開している。

via: パスワード入力の「****」は不要？　研究者の間で激しい論議

パスワード入力は僕もよくタイプミスをして全部打ち直します。どうにかしてください本当に。
それにしてもiPhoneのUIはとてもよくできてますね。使っていて本当に気持ちがいいです。
使っていて気持ちがいいサイト設計というのは簡単なようでとても難しいものなので、小さなことからでもユーザーの負担を減らしていければいいですね。

サンプル
サンプルファイルのダウンロード

導入方法

1.CSS、 jQueryとhintmask.jsを読み込む。

2. パスワード入力欄を用意する。

CLASSはなんでもいいです。あとで実行するときに指定するためのものなので、IDでも大丈夫です。

3. 実行する

$()で対象にする要素を指定します。

$(function(){
  $('.hintmask').hintmask();
});

オプション

オプションでマスクの文字、ヒント位置の調整を指定できます。

$(function(){
  $('.hintmask').hintmask({
    mask: '*',
    top: 5,
    left: 0
  });
});

本当にどうでもいいことですが mask の値を ＼(^O^)／ とかにするととてもうざくなるので注意が必要です。

カッとなった勢いでうざすぎるサンプルも用意しました。

サンプル
サンプルファイルのダウンロード