matsunaga

PHPプログラマーの松永です。

今回は、jQueryを使用し、パスワード表示時にマスキング有無を選択できるようにする方法をご紹介します。

パスワードを管理しているサービスでは必須の機能ですが、簡単に実装することができ、導入にハードルがないのでおすすめです。

前提

今回はjsfiddleを使用し、サンプルを作成しています。

簡易的に作成していますので、Pタグなど使用し改行を行っています。

業務ではしっかりとCSSでレイアウトの調整を行っていただければと思います。

HTML

HTMLはとてもシンプルで、

1. パスワードを入力するインプット
2. パスワードに対してマスキング有無を選択するチェックボックス

のみです。

<p>
    <input type="password" id="js-password" class="password" />
</p>

<p>
    <label for="js-passcheck">パスワードを表示する</label>
    <input type="checkbox" id="js-passcheck"/>
</p>

jQuery

jQueryのバージョンは3.3.1を使用しています。

changeイベントを使用し、インプットのタイプをtextかpasswordかに変更することでマスキング有無を実現しています。

$(function() {
    var password  = '#js-password';
    var passcheck = '#js-passcheck';
    
    $(passcheck).change(function() {
        if ($(this).prop('checked')) {
            $(password).attr('type','text');
        } else {
            $(password).attr('type','password');
        }
    });
});

CSS

今回は抵抗なく見えるようにしているCSSを記述しているのみとなっています。

.password {
    font: 20px sans-serif;
    padding: 12px;
    border: 1px solid #000000;
    border-radius: 3px;
}

jsfiddle

実際の動作をjsfiddleで確認できますので、是非動作させてみてください。

以上でございます。

まとめ

今回は入力画面を想定した入力時のサンプルでしたが、 入力画面だけではなく確認画面やログイン画面などにも適応することができます。

導入にハードルがなく、セキュリティの向上に繋がりますので参考になれば幸いです。