フォームで利用する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);}); |
フォーカス時と外れたときにアニメーションエフェクト付きで長さを変えます。
入力すると自動で高さが変わる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(); |
上記コードはプラグインになってます。
チェックボックスやラジオボタンの選択項目をハイライトする
項目数が多い場合に施工してあげると親切かも。
コード
$(":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が加わるようにします。
パスワードの表示/非表示をスイッチできるようにする
「ユーザーが選択出来るようにする」は基本的に親切な配慮です。
コード
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要素にチェックが付く
【追記】
コメントでご指摘を受けて修正しました
以上です
動作は一応するけど、コピペで使うと多分痛い目見ます。
今になって気が付いたけど「利用規約に同意して送信する」って別にユーザビリティじゃないですね。
