フォーム(form)まわりで便利なjQueryスニペット6選

フォーム(form)まわりで便利なjQueryスニペット5選 Awesome jQuery snippets to work with forms | CatsWhoCode.comで紹介されていたスニペットがよさそうだったので、抜粋して紹介します。

1:"enter"キーを無効に $("#form").keypress(function(e) {
if (e.which == 13) {
return false;
}
});

2:checkboxがcheckされているか確認 $('#checkBox').attr('checked');

3:formの要素を有効/無効 $("#submit-button").attr("disabled", true); $("#submit-button").removeAttr("disabled");

4:入力されたら送信ボタンを表示 $('#username').keyup(function() {
$('#submit').attr('disabled', !$('#username').val());
});

5:submitボタンを複数回押させない $('form').submit(function() {
if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
jQuery.data(this, "disabledOnSubmit", { submited: true });
$('input[type=submit], input[type=button]', this).each(function() {
$(this).attr("disabled", "disabled");
});
return true;
}
else
{
return false;
}
});

6:入力中の項目をハイライトさせる $("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
$("label").removeClass("labelfocus");
});

フォームの最適化でコンバージョン率アップを図れるかもしれませんね。
元記事には他にも数種類ありますので、御覧ください。
Awesome jQuery snippets to work with forms | CatsWhoCode.com

sponsors

「フォーム(form)まわりで便利なjQueryスニペット6選」をシェアする

記事作成:
記事URL:

TOP > > フォーム(form)まわりで便利なjQueryスニペット6選