[JS]パスワード入力時・入力後に一時的にパスワードを可視化するスクリプト -hideShowPassword

フォームのパスワードは通常伏せ字になっており見ることができませんが、入力後や入力時に一時的にパスワードを可視化するjQueryのプラグインを紹介します。

下記は入力後にパスワードを可視化したものですが、入力時に可視化した後に不可視にもできます。

Hide/Show Passwords
Hide/Show Passwords -GitHub

• Hide/Show Passwordsのデモ
• Hide/Show Passwordsの使い方

Hide/Show Passwordsのデモ

デモは3種類あります。

デモページ

3種類のデモは、切替のトリガーが異なります。
入力時に可視化しておくとパスワードは最初から可視化され、不可視にしておき入力後に可視化することもできます。

demo 1: アイコン

demo 2: テキスト

demo 3: チェックボックス

Hide/Show Passwordsの使い方

Step 1: 外部ファイル

外部ファイルに当スクリプトとjQuery、またはZepto.jsを外部ファイルとして記述します。
※jQueryとZeptoの兼用プラグインとなっています。

<script>
document.write('<script src=vendor/' +
('__proto__' in {} ? 'zepto.custom' : 'jquery') +
'.js><\/script>')
</script>

<script src="hideShowPassword.min.js"></script>

Step 2: HTML

HTMLは通常通りのフォームの作成です。

  <div class="login">
    <input type="text" placeholder="Username">
    <input id="password" type="password" placeholder="Password">
  </div>

Step 3: JavaScript

パスワードの可視・不可視の切替はスクリプトで実行します。

$('#password').showPassword(); // 可視
$('#password').hidePassword(); // 不可視
$('#password').togglePassword(); // トグル

パスワードの入力欄に可視化のボタンを加えるには、オプションを使用します。

$('#password').hideShowPassword({
    show: true, // パスワード可視の有無
    innerToggle: true, // トグルボタンを入力欄に設置するかの有無
    hideToggleUntil: 'focus', // フォーカスされるまでトグルを隠す
    touchSupport: Modernizr.touch // タッチデバイスのサポート
});