筆者はパスワード入力をよく間違えてしまうのですが,
どこまで入力したのかが分かりづらいと思うのです。セキュリティ面で考えると他の人に見られたりするような場所では,
では,
今回使うメソッドの紹介
まずは今回使うメソッドを紹介しておきます。
afterメソッド
指定した要素/文字列など(A)を対象要素(B)の後ろに追加します。
$(B).after(A);
同じようにbeforeメソッドというものもあり,
$(B).before(A);
また,
$(A).insertAfter(B);
// 指定した要素/文字列など(A)を対象要素(B)の後ろに追加
$(A).insertBefore(B);
// 指定した要素/文字列など(A)を対象要素(B)の前に追加
replaceWithメソッド
指定した要素(A)を対象要素(B)と入れ替えます。
$(B).replaceWith(A);
任意でパスワードを可視化する
仕組みとしては簡単で,
チェックボックスの追加
まずはチェックボックスを追加しましょう。passCheckという変数にinput要素をjQueryオブジェクトとして保存しておき,
チェックボックスの追加
jQuery(function($){
var passInput = $('#password');
var passCheck = $('<input type="checkbox" />');
passInput.after(passCheck);
});
チェックボックスの値の判定
次は追加したチェックボックスの値によって,
チェックボックスの値によって,
jQuery(function($){
var passInput = $('#password');
var passCheck = $('<input type="checkbox" />');
passInput.after(passCheck);
passCheck.click(function(){
if(this.checked){
alert('visible');
}else{
alert('hidden');
}
});
});