もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第14回入力した/入力するパスワードを見えるようにする

入力した/入力するパスワードを見えるようにする
入力した/入力するパスワードを見えるようにする

筆者はパスワード入力をよく間違えてしまうのですが、そもそもパスワードの入力ボックスは不親切だと思いませんか?

どこまで入力したのかが分かりづらいと思うのです。セキュリティ面で考えると他の人に見られたりするような場所では、確かに入力したものが隠れている必要があります。

では、任意で見えるようにしてはどうでしょう?今回は任意でパスワードを見えるようにするサンプルの紹介をしたいと思います。

今回使うメソッドの紹介

まずは今回使うメソッドを紹介しておきます。

afterメソッド

指定した要素/文字列など(A)を対象要素(B)の後ろに追加します。

$(B).after(A);

同じようにbeforeメソッドというものもあり、こちらは指定した要素/文字列など(A)を対象要素(B)の前に追加します。

$(B).before(A);

また、似たようなメソッドにinsertAfterメソッド、insertBeforeメソッドがありますが、これらはAとBの扱いが逆になっているので注意が必要です。

$(A).insertAfter(B);
// 指定した要素/文字列など(A)を対象要素(B)の後ろに追加

$(A).insertBefore(B);
// 指定した要素/文字列など(A)を対象要素(B)の前に追加

replaceWithメソッド

指定した要素(A)を対象要素(B)と入れ替えます。

$(B).replaceWith(A);

任意でパスワードを可視化する

仕組みとしては簡単で、⁠パスワード入力ボックスの後ろにチェックボックスを追加して、チェックされているときはパスワードを表示できる状態にする」というものです。

チェックボックスの追加

チェックボックスの追加
チェックボックスの追加

まずはチェックボックスを追加しましょう。passCheckという変数にinput要素をjQueryオブジェクトとして保存しておき、afterメソッドを利用して$('#password')の後ろに追加しています。

チェックボックスの追加
jQuery(function($){
    var passInput = $('#password');
    var passCheck = $('<input type="checkbox" />');
    passInput.after(passCheck);
});

チェックボックスの値の判定

チェックボックスの値の判定
チェックボックスの値の判定

次は追加したチェックボックスの値によって、アラートを表示してみます。チェックボックスにclickイベントを追加して、クリックされたときにchecked属性があるかないかで判別します。

チェックボックスの値によって、アラートを表示
jQuery(function($){
    var passInput = $('#password');
    var passCheck = $('<input type="checkbox" />');
    passInput.after(passCheck);
    
    passCheck.click(function(){
        if(this.checked){
            alert('visible');
        }else{
            alert('hidden');
        }
    });
});

チェックボックスの値によってパスワード入力ボックスの可視化

チェックボックスの値によってパスワード入力ボックスの可視化
チェックボックスの値によってパスワード入力ボックスの可視化

最後に、チェックボックスの値によって可視化するのですが、これを実現するには一見するとinput要素のtype属性を入れ替えればいいように見えますが、実際に[type=password]から[type=text]への操作は、DOMの操作で禁止されているので行うことができません。

type属性は操作することができない
jQuery(function($){
    var passInput = $('#password');
    var passCheck = $('<input type="checkbox" />');
    passInput.after(passCheck);
    
    passCheck.click(function(){
        if(this.checked){
            passInput.attr('type','text');
        }else{
            passInput.attr('type','password');
        }
    });
});

試しにチェックボックスをクリックしてみてください。Firebugでは以下のようなエラーが表示されます。

実行結果
実行結果

それではどうすればいいでしょうか。今回は現在表示している[type=password]の入力ボックスを[type=text]の入力ボックスに置き換えることで実現することにします。name属性を引き継げば一般のフォームであれば問題なく値をsubmitできるはずです。

チェックボックスの値によって可視化する
jQuery(function($){
    var passInput = $('#password');
    var passVisible = $('<input type="text" value="" name="password" id="password_visible" />');
    var passCheck = $('<input type="checkbox" />');
    passInput.after(passCheck);
    
    passCheck.click(function(){
        if(this.checked){
            passInput.replaceWith(passVisible.val(passInput.val()));
        }else{
            passVisible.replaceWith(passInput.val(passVisible.val()));
        }
    });
});

新しくpassVisibleという変数を追加しました。passVisibleには既存の[type=password]と置き換わる要素を入れておき、passCheckの値によって、passInputと入れ替えます。ポイントは入れ替えるときに同時にvalueに入力された値を入れてしまうところです。

passInput.replaceWith(passVisible.val(passInput.val()));

入れ子になっていて見づらいかもしれませんが、分けて書くと以下のようになっています。

var value = passInput.val();
passVisible.val(value);
passInput.replaceWith(passVisible);

プラグインにする

上記のソースコードでは対象の値毎に書く必要があるので、いつでも呼び出せるようにプラグイン化してしまいましょう。

プラグイン化するときのポイントは対象要素によってname/id属性が変わる、ということに注意して書き換える、ということです。また複数の要素を渡せるようにeachメソッドで処理をループできるようにしておきます。

プラグイン化
(function($){
    $.fn.visiblePassBox = function(){
        $(this).each(function(){
            var passInput = $(this);
            var passVisible = $('<input type="text" value="" name="'+passInput.attr('name')+'" id="'+passInput.attr('id')+'_visible" />');
            var passCheck = $('<input type="checkbox" />');
            passInput.after(passCheck);
            
            passCheck.click(function(){
                if(this.checked){
                    passInput.replaceWith(passVisible.val(passInput.val()));
                }else{
                    passVisible.replaceWith(passInput.val(passVisible.val()));
                }
            });
        });
    }
})(jQuery);

passInputを$(this)として、passVisibleの属性値もそれによって変わるように書き換えました。属性値の取得はattr(属性)を使います。

var passInput = $(this);
var passVisible = $('<input type="text" value="" name="'+passInput.attr('name')+'" id="'+passInput.attr('id')+'_visible" />');

プラグイン化ができたら、実行してみましょう。

jQuery(function($){
    $('#password').visiblePassBox();
});

以上で実装できました。いかがだったでしょうか。パスーワードはセキュリティや個人情報に関わる箇所なので、UIもある程度慎重に扱う必要がありますが、なるべくユーザーに負担をかけないように設計したいですね。

ちなみに、以前パスワード入力欄の最後の文字列をヒントとして表示するjQueryプラグインというものを作成していますので、興味のある方はこちらもご覧になってみてください。

おすすめ記事

記事・ニュース一覧