Web制作の現場で使えるjQuery　UIデザイン入門 ― 第9回

jQueryによるフォームのデザインの基礎（後編）

2009年09月02日 15時30分更新

文● 西畑一馬／to-R

■パスワード入力フォーム部品を選択する:password

　:passwordは、type属性の値が「password」のinput要素（パスワード入力フォーム）だけを選択するフィルターです。

　次のサンプルでは、パスワード入力フォームがフォーカスされると、input要素の後ろに「<p>パスワードは6文字以上で入力してください</p>」という(X)HTMLを追加します。フォーカスが外れると、p要素を取り除きます。

▼サンプル11（スクリプト部分）


$(function(){
    $(":pass").focus(function(){
        $(this).after("<p>パスワードは6文字以上で入力してください</p>");
    }).blur(function(){
        $("p").remove();
    })
})

▼サンプル11（(X)HTML部分）


パスワード：<input type="password" name="pass" />

▼サンプル11（実行結果）


サンプル03の実行画面。パスワード入力フォームをフォーカスすると、「パスワードは6文字以上で入力してください」と表示される

■ラジオボタンを選択する:radio

　:radioは、type属性の値が「radio」に設定されているinput要素（ラジオボタン）だけを選択するフィルターです。

　次のサンプルでは、ラジオボタンがクリックされると、ラジオボタンと対になるlabel要素（ラジオボタンのid属性と同じ値をfor属性に持つlabel要素）を太字に変更します。また、label要素がクリックされた場合も、クリックされたlabel要素を太字にします。

　なお、以前にチェックを入れたラジオボタンが太字のままにならないように、クリックイベントの処理の最初に $("label").css("font-weight","") として、すべてのlabel要素のfont-weightプロパティをいったん初期値に戻しています。

▼サンプル12（スクリプト部分）


$(function(){
    $(":radio").click(function(){
        $("label").css("font-weight","")
        $("label[for='"+$(this).attr("id")+"']").css("font-weight","bold")
    })
    $("label").click(function(){
        $("label").css("font-weight","")
        $(this).css("font-weight","bold")
    })
})

▼サンプル12（(X)HTML部分）


性別:
<input type="radio" name="gender" value="男性" id="gender_man" />
<label for="gender_man">男性</label>
<input type="radio" name="gender" value="女性" id="gender_woman" />
<label for="gender_woman">女性</label>

▼サンプル12（実行結果）


サンプル12の実行画面。ラジオボタンを選択すると対応するラベルを太字にする

【実務でハマる落とし穴】

「change() じゃダメ？」

　実はサンプル12は、フォームの値の変更を感知するchange()を使って、もっと簡単に書くことができます。

▼サンプル13（スクリプト部分）


$(function(){
    $(":radio").change(function(){
        $("label").css("font-weight","")
        $("label[for='"+$(this).attr("id")+"']").css("font-weight","bold")
    })
})

　ところがこのプログラム、残念ながらInternet Explorer（IE）では望みの結果が得られません。

　先に説明したとおり、changeイベントは、該当するフォーム部品からフォーカスが外れたタイミングで値が変更されたかどうかを確認します。FirefoxやSafariは、ラジオボタンがクリックされると、クリックされた要素が一瞬フォーカスされた後すぐにフォーカスが外れます。ところが、IEの場合はラジオボタンをクリックしただけではラジオボタンにフォーカスが残り、改めてほかの要素をクリックしなければフォーカスが外れません。そのため、意図したとおりにchangeイベントの処理は動作しない、というわけです。

前へ 1 2 3 4 5 次へ

ツイートする