4

私は、大量の入力を行うために使用されるいくつかの Web ページに取り組んでいます。インターフェイスには多くのコントロールがあり、ユーザーの習慣により、キーfocusを押して次のコントロールに設定する必要がありますEnter

実際、私はjQueryこのように実装された古典的なアプローチを使用しています

    $('#txtInput1').keypress(
            function(event) {
               if (event.keyCode == 13) {
                      $('#txtInput2').focus();
               }
     });

    $('#txtInput2').keypress(
            function(event) {
               if (event.keyCode == 13) {
                   $.getJSON('Ajax/getSomeResult.aspx', 
                             {'param': $(this).val() }, function(data) {
                         if (data['msg'] != "")
                              $('#txtInput3').focus();
                         else 
                              $('#txtInput4').focus();
                    });
                }
    });

    $('#txtInput4').keypress(
            function(event) {
               if (event.keyCode == 13) {
                      $('#txtInput5').focus();
               }
     });

ご覧のとおり、次にジャンプするコントロールを特定する前に追加の作業を行う必要がある場合、一部を除いて、各入力コントロールに対して同じコード構造が繰り返されます。

私の質問は、このコードをどのようにリファクタリングして、可能であればほとんどまたはまったく繰り返しなしですべてのページで機能するソリューションを作成できるかということです。

条件があることを覚えておいてください

  $.getJSON(
       'Ajax/getSomeResult.aspx', 
       {'param': $(this).val() }, 
       function(data) {
          if (data['msg'] != "")
              $('#txtInput3').focus();
          else 
              $('#txtInput4').focus();
  });

は単なる例です。必要な次のコントロールを選択できるものなら何でもかまいません。focus

4

2 に答える 2

1

「邪魔にならない」アプローチを使用します。のように独自の属性を入力要素に追加し、data-focus-next="txt2" data-post-url="/whatever"それらの属性をjQueryセレクターとして使用してdocumentReadyにイベントを追加します。

たとえば、JSON応答に基づいて次のコントロールを制御するために、さらに属性を追加しますdata-post-success-focus="txt3" data-post-fail-focus="txt4"。

ページごとのカスタマイズ（必要な場合）では、のように、属性として呼び出されるJS関数名を定義することもできますdata-on-post="txt4OnPost"。

于 2012-06-08T13:00:08.887 に答える
0

繰り返しは必要ありません！このように使用します。

$('input[id*="txtInput"]').keypress(
    function(event) {
       if (event.keyCode == 13) {
          next = $(this).attr('id').substr($(this).attr('id').length-1);
          $('#txtInput' + next).focus();
       }
   }
);

クラスを使用する場合は、次のことを試してください。

$('input[class*="txtInput"]').keypress(
    function(event) {
       if (event.keyCode == 13) {
          if($(this).hasClass('theAjaxCondition'))
          {
              $.getJSON('Ajax/getSomeResult.aspx', 
                  {'param': $(this).val() }, function(data) {
                  if (data['msg'] != "")
                      $('.txtInput' + next).focus();
                  else 
                      $('.txtInput' + next + 1).focus();
              });
           } else {
               next = $(this).attr('class').substr($(this).attr('class').length-1);
               $('.txtInput' + next).focus();
           }
       }
   }
);

この入力のHTMLで、Hopeが役立つことを示す必要があります。:)

于 2012-06-08T11:54:34.227 に答える