Question

我正在处理一些用于进行大量输入的网页。接口有很多控件，由于用户习惯，按 Enter 键将focus设置为下一个控件

实际上我正在使用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

的下一个控件

Answer 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"。

Answer 2

需要

不重复！以这种方式使用它：

$('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中，您需要提供希望能帮助到你！：）

我们如何为网页实现可重用的焦点管理器

2 个答案: