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

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

この記事を読むのに必要な時間:およそ 4 分

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

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

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

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

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

今回使うメソッドの紹介

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

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

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/

コメント

コメントの記入