• かちびと.net

    チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか。覚えておくと便利です。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか

スポンサーリンク

フォームで利用するjQueryのスニペット
コードをいくつか。どれも既出だと思う
のでおさらいという事で。とはいえ、所詮
はスニペットですので実際に導入する際
は動作をしっかりと検証する事を強く
推奨します。

フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。

フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。

Placeholder属性を、非対応ブラウザでは表示/非表示に


便利なHTML5のPlaceholder属性をオールドブラウザでは表示/非表示として対応します。

コード

    if(!$.support.placeholder) {
        var active = document.activeElement;
        $(':text').focus(function () {
            if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                $(this).val('').removeClass('hasPlaceholder');
            }
        }).blur(function () {
            if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
            }
        });
        $(':text').blur();
        $(active).focus();
        $('form').submit(function () {
            $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
        });
    }​

サポートしてるブラウザと非サポートブラウザで分岐する

via:Cross-Browser Support for HTML5 Placeholder Text in Forms

input要素にフォーカスしたらデフォルトテキストを全選択


forcusfocusメソッドを利用しているケースも見かけますが、mouseupを使うと選択が外れにくいです
※スペル間違えてた

コード

$('.allselect').live('mouseup', function() {
    $(this).select();
});

チェックボックスを全部選択する


よくあるやつ

コード

$("#toggle").click(function(){
       $('.cbox').prop('checked', $(this).prop('checked'));
});

親をクリックすると子のinputが全部選択される。

フォーカスしたらアニメーションしながら伸びる検索窓


CSS3でたまに見かけるやつをオールドブラウザでも利用出来るようにする

コード

$('input').focus(function(){
     t = $(this);
    if(t.val()==='foo bar'){t.val('');
    }t.animate({width: '250px'},400);
}); 

$('input').blur(function(){
     t = $(this);
    if(t.val()===''){t.val('foo bar');
    }t.animate({width: '140px'},500);
});

フォーカス時と外れたときにアニメーションエフェクト付きで長さを変えます。

via:jquery input auto-resize

入力すると自動で高さが変わるtextarea


もうちょい工夫しないとですけど。

コード

$.fn.textarea = function(){
    function init(){
        var d = $(this).wrap('<div></div>');
        var p = $('<pre></pre>').html(d.val()).insertAfter(d);
        d.bind('keyup change click focus',function(e){
            p.html(d.val());
        });
    }
    return this.each(init);
};
$('textarea').textarea();

上記コードはプラグインになってます。

via:Self resizing textarea

チェックボックスやラジオボタンの選択項目をハイライトする


項目数が多い場合に施工してあげると親切かも。

コード

$(":checked").parent().css("background","#f3f365");
    $("input").click(function(e) {
        var t = e.target.type;
        var chk = $(this).prop('checked');
        var name = $(this).attr('name');
        if(t === 'checkbox') {
            if(chk === true){
                $(this).parent().css('background', '#f3f365');
            } else {
                $(this).parent().css('background-color', '');
            }
            return true;
        } else if(t === 'radio') {
            if(chk === true){
                $("input[name=" + name + "]").parent().css("background-color","");
                $(this).parent().css("background","#f3f365");
            }
            return true;
        }
    });

選択してある要素の親に背景色を変えるcssが加わるようにします。

via:jQueryでフォームのユーザビリティを強化

パスワードの表示/非表示をスイッチできるようにする


「ユーザーが選択出来るようにする」は基本的に親切な配慮です。

コード

function changeInputType(inputId, type) {
    var input = $("#" + inputId);
    $(input).replaceWith($("<input />").val(input.val()).attr("placeholder", input.attr("placeholder")).attr("id", inputId).attr("type", type));
}

$("#show-ps").change(function() {
    if ($(this).attr("checked")) {
        changeInputType("password", "text");
    } else {
        changeInputType("password", "password");
    }
});

if ($("#show-ps").attr("checked")) {
    changeInputType("password", "text");
}​

inputのタイプを、チェックボックスにチェックが入ったらpasswordからtextに変更すれば入力した内容を表示させる事ができます。

via:jsbin

「利用規約に同意して送信する」的なものを作る


チェックを入れないと送信できない。必要かどうか分からないけどよくあるので。

コード

$('#submit').attr("disabled","disabled");
$('#check').click(function(){

    if($(this).prop('checked') == false){
         $('#submit').attr("disabled","disabled");
    }
    else {
        $('#submit').removeAttr('disabled');
    }
});

チェックボックスがfalseの時はsubmitがdisabledになるようにする。

via:How do i disable a submit button when checkbox is uncheck?

チェックボックスのチェック項目数を制限する


「~個以上はチェックしないで下さい」ってユーザーに頼むんじゃなくて、こっちでそういう仕様にしてあげたほうが良いです。

コード

$("input").click(function(){
    var $count = $("input:checked").length;
    var $not = $('input').not(':checked');

    if($count >= 3) {
        $not.attr("disabled",true);
    }else{
        $not.attr("disabled",false);
    }
});​

lengthでチェックされた数を取得して、数で条件分岐します。

inputにフォーカス中はツールチップでヘルプを出す


あんまりやりすぎると鬱陶しいかもですけど。

コード

$("p").hide();
$("input").focus(function() {
    $("p").fadeToggle("fast", "linear");
});
$("input").focusout(function() {
    $("p").fadeToggle("fast", "linear");
});

フォーカス時に、hideさせてたp要素をフェードエフェクトで表示させます。

親のinputにチェックを入れると子は全部disableになるようにする


あんまり使わないかもですけど・・

コード

$("#piyo").click(function() {
       $(".list").each(function() {
               this.disabled = !this.disabled;
            });
    });​

ラジオボタンの選択に応じて表示コンテンツを切り替える


こういうのもあると便利。選択項目の詳細を表示したい時でも、結構スペースを確保できます。

コード

    $("input").click(function(){
            $('.box').hide();
            $("#box-"+$(this).val()).fadeIn('first');
    });

IDにあわせて表示。

テーブルの行ごとチェックボックスにする


チェック項目の内容、情報量が多い時はテーブルでグルーピングして丸ごとチェックボックス化

コード

$('input[type=checkbox]').click(function() {
    var t = $(this);
    if(t.prop('checked')){
          t.prop('checked', '');
              }else{
          t.prop('checked', 'checked');}
});

$('table tr').click(function() {
    var $c = $(this).children('td').children('input[type=checkbox]');
    if ($c.prop('checked')){
          $c.prop('checked', '');
              }else{
          $c.prop('checked', 'checked');}
});​

trをクリックするとtd内のinput要素にチェックが付く
【追記】
コメントでご指摘を受けて修正しました

以上です

動作は一応するけど、コピペで使うと多分痛い目見ます。

今になって気が付いたけど「利用規約に同意して送信する」って別にユーザビリティじゃないですね。

URL :
TRB :

Comments & Trackbacks (6)

  1. TOKUMEI

    普段よく使う事になるJsシリーズかと思いました。
    ちょくちょく作ってはいるもののまとめた事がまだなかったので、助かります。

    ただ、テーブルの行ごとチェックボックスにする が、なんだかチェックボックスをクリックしたときにチェックが入らないような・・・?

    • シロ

      こんにちは。コメント有難う御座います。

      シリーズw

      ご指摘の件、チェックボックス自体の事を失念していました・・ので修正しました!
      教えて頂いて有難う御座いました!

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services