2014年4月25日

jQueryを使ってエラー発生項目の先頭にフォーカスを当てる

 webの画面でjavascriptで入力項目チェックをした時にエラー項目にフォーカスを位置づける簡単な方法に気づきました。
 
やり方

  1. エラーになった項目のclassにマーク(例えば「item_error」というクラス名)を付ける。
  2. classに"item_error"が付いている一番最初の項目にフォーカスを当てる。
    そのロジックが以下。

ロジックの説明
 classに「item_error」が付いている項目にフォーカスを当てるロジック。
ポイントは、コールバック関数に「return false;」を付けること。
これをしないと、エラーのあった最後の項目にフォーカスがあたる。
(eachを終わらせるための方法)
$(".item_error").each(function() {
    $(this).focus();
    return false;
});
もっと良い方法
 「item_error」というclassが設定されているinput, select, text(, button)要素をに対してフォーカスを当てます。
 くるくる回らなくても良いので(コンピュータ的に)速いです(項目が少なければ人が感じられるほど違いはありません。)。
    $('.item_error:input:visible').eq(0).focus();
これで、エラーがあった項目を保持しておく必要がなくなるな。

0 件のコメント:

コメントを投稿