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

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

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

今回使うメソッドの紹介

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

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');
        }
    });
});