4

我正在处理一些用于进行大量输入的网页。界面控件较多，由于用户习惯，按键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 中，您需要提供希望它有帮助！:)

于 2012-06-08T11:54:34.227 回答