筆者はパスワード入力をよく間違えてしまうのですが、そもそもパスワードの入力ボックスは不親切だと思いませんか?
どこまで入力したのかが分かりづらいと思うのです。セキュリティ面で考えると他の人に見られたりするような場所では、確かに入力したものが隠れている必要があります。
では、任意で見えるようにしてはどうでしょう?今回は任意でパスワードを見えるようにするサンプルの紹介をしたいと思います。
今回使うメソッドの紹介
まずは今回使うメソッドを紹介しておきます。
afterメソッド
指定した要素/文字列など(A)を対象要素(B)の後ろに追加します。
同じようにbeforeメソッドというものもあり、こちらは指定した要素/文字列など(A)を対象要素(B)の前に追加します。
また、似たようなメソッドにinsertAfterメソッド、insertBeforeメソッドがありますが、これらはAとBの扱いが逆になっているので注意が必要です。
replaceWithメソッド
指定した要素(A)を対象要素(B)と入れ替えます。
任意でパスワードを可視化する
仕組みとしては簡単で、「パスワード入力ボックスの後ろにチェックボックスを追加して、チェックされているときはパスワードを表示できる状態にする」というものです。
チェックボックスの追加
まずはチェックボックスを追加しましょう。passCheckという変数にinput要素をjQueryオブジェクトとして保存しておき、afterメソッドを利用して$('#password')の後ろに追加しています。
チェックボックスの値の判定
次は追加したチェックボックスの値によって、アラートを表示してみます。チェックボックスにclickイベントを追加して、クリックされたときにchecked属性があるかないかで判別します。
チェックボックスの値によってパスワード入力ボックスの可視化
最後に、チェックボックスの値によって可視化するのですが、これを実現するには一見するとinput要素のtype属性を入れ替えればいいように見えますが、実際に[type=password]から[type=text]への操作は、DOMの操作で禁止されているので行うことができません。
試しにチェックボックスをクリックしてみてください。Firebugでは以下のようなエラーが表示されます。
それではどうすればいいでしょうか。今回は現在表示している[type=password]の入力ボックスを[type=text]の入力ボックスに置き換えることで実現することにします。name属性を引き継げば一般のフォームであれば問題なく値をsubmitできるはずです。
新しくpassVisibleという変数を追加しました。passVisibleには既存の[type=password]と置き換わる要素を入れておき、passCheckの値によって、passInputと入れ替えます。ポイントは入れ替えるときに同時にvalueに入力された値を入れてしまうところです。
入れ子になっていて見づらいかもしれませんが、分けて書くと以下のようになっています。
プラグインにする
上記のソースコードでは対象の値毎に書く必要があるので、いつでも呼び出せるようにプラグイン化してしまいましょう。
プラグイン化するときのポイントは対象要素によってname/id属性が変わる、ということに注意して書き換える、ということです。また複数の要素を渡せるようにeachメソッドで処理をループできるようにしておきます。
passInputを$(this)として、passVisibleの属性値もそれによって変わるように書き換えました。属性値の取得はattr(属性)を使います。
プラグイン化ができたら、実行してみましょう。
以上で実装できました。いかがだったでしょうか。パスーワードはセキュリティや個人情報に関わる箇所なので、UIもある程度慎重に扱う必要がありますが、なるべくユーザーに負担をかけないように設計したいですね。
ちなみに、以前「パスワード入力欄の最後の文字列をヒントとして表示するjQueryプラグイン」というものを作成していますので、興味のある方はこちらもご覧になってみてください。