パスワードの見える化を実現するjQueryプラグイン「hideShowPassword」

「hideShowPassword」はWebサービスのパスワード入力フォームでよく見るパスワードの見える化を実現するjQueryプラグインです。

hideShowPassword

2013-06-21 19.40 のイメージ

この機能、最近よく見かけるようになりましたね。目のマークがとても印象的です。パスワード入力には”input”タグの”type=password”属性を使用しますが、●で覆い隠されてしまうため入力後の確認ができません。確認のためもう一度パスワードを入力してもらうのは常套手段ですが、capsがONになっているなど初心者の方が気づきにくいパスワードの入力間違いは、せっかくユーザー登録していただいたのに離れていってしまう原因の元です。
なのでこのような機能を導入しておくことはパスワードの登録ミスを防ぐ上で使えそうですね。それでは機能についてご紹介します。

まずは普通に入力してみましょう。しっかり●で覆い隠されていますね。

2013-06-21 19.55 のイメージ

 

それでは目のマークをクリックしてみます。するとこのようにパスワードが表示されました。こんな安易なパスワード絶対に設定してはダメですよ。

2013-06-21 19.58 のイメージ

 

 

それでは「hideShowPassword」の実装方法をご紹介します。まずはjQuery、zepto、modernizr含む外部ファイルを読み込みます。

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
<script src="vendor/modernizr.custom.js"></script>
<script src="hideShowPassword.min.js"></script>

 

HTMLはこのようにマークアップします。

<figure>
  <div class="login">
    <input class="login-field login-field-username" type="text" placeholder="Username" autocapitalize="off" autocomplete="off" autocorrect="off"><br>
    <input class="login-field login-field-password" id="password-1" type="password" placeholder="Password">
  </div>
  <figcaption>Inner toggle styled as icon.</figcaption>
</figure>

 

CSSはこのように指定してください。

.hideShowPassword-toggle {
  background-image: url(img/wink.svg);
  background-position: 0 center;
  background-repeat: no-repeat;
  cursor: pointer;
  height: 100%;
  overflow: hidden;
  text-indent: -9999em;
  width: 44px;
}
.hideShowPassword-toggle-hide {
  background-position: -44px center;
}

 

JavaScriptは以下のように実装します。

$('#password-1').hideShowPassword({
  innerToggle: true,
  touchSupport: Modernizr.touch
});

 

するとこのように作ることができました。

2013-06-21 20.17 のイメージ

 

2013-06-21 20.17 のイメージ (1)

 

目の位置が若干あれですね。すいません、急いでいました。CSSで簡単に直せるはずです。ぜひ参考にどうぞ。

 

Home > JavaScript > パスワードの見える化を実現するjQueryプラグイン「hideShowPassword」

Return to page top