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

Question

我正在处理一些用于进行大量输入的网页。界面有很多控件，由于用户习惯，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

的控件的东西

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