如何强制进入表单中的活动下一个输入字段答案

【问题标题】：How to force enter to active next input field in form如何强制进入表单中的活动下一个输入字段
【发布时间】：2013-11-05 14:11:45
【问题描述】：

移动网络应用程序包含订单输入表单。
行包含产品代码和数量。
移动条码扫描器在条码之后发送输入，这会导致表单提交。

如何防止在输入时提交表单：输入应该像标签一样，它必须：

激活下一个输入字段。
只能使用提交按钮提交。

使用jQuery、jQuery-mobile、ASP.NET MVC4。应用程序正在使用基于 WebKit 的浏览器在 Motorola MC2180 计算机上运行。这是现代浏览器，支持 html5。

数据录入页面：

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width" />
      <link href="/Scripts/jquery-mobile/jquery.mobile-1.3.2.css" rel="stylesheet"/>
      <script src="/Scripts/jquery/jquery-1.9.1.js"></script>
      <script src="/Scripts/jquery-mobile/jquery.mobile-1.3.2.js"></script>
      <script src="/Scripts/applibrary.js"></script>

    </head>
    <body>
  <div>  
    <form id='inputform' method="post" 
       action ="/Detail/SaveFullDocument">
      <input type="hidden" name="_rows" />
      <table id="tableId">
        <tr>
          <th>Code</th>
          <th>Quantity</th>
          <td>
            <input type="button" value="+" onclick="addRow('tableId')" /></td>
        </tr>

        <tr>
          <td>
            <input type="text" name="Product" /></td>
          <td>
            <input type="number" name="Quantity" /></td>
          <td>
            <input type="button" value="-" onclick="deleteRow(this)" /></td>
        </tr>
        <tr>
          <td>
            <input type="text" name="Product" /></td>
          <td>
            <input type="number" name="Quantity" /></td>
          <td>
            <input type="button" value="-" onclick="deleteRow(this)" /></td>
        </tr>
        ....
      </table>

        <input type="button" value="+" onclick="addRow('tableId')" />
        <input type="submit" value='Save' />
    </form>
      </div>
    </body>
    </html>

【问题讨论】：

标签： javascript jquery html asp.net-mvc jquery-mobile

【解决方案1】：

$('#inputform').on('keydown', 'input', function (event) {
        if (event.which == 13) {
            console.log($(this));
            $(this).next('input').focus();
            event.preventDefault();
        }
});

如果您只需要在输入时关注下一个元素，则无需遍历所有输入，因为$(this) 将是目标元素。

DEMO

【讨论】：

也许你可以做$(this).focus()
要使用 jQuery 选择下一个元素，您可以使用 next() 方法，例如 $(this).next('input').focus()
尝试在 if 条件结束时返回 false return false; ，也可以尝试绑定多个事件 $('#inputform').on('keypress keydown keyup', 'input', function(){...});
试试这个 - $('#inputform').on('keydown', 'input', function (event) { if (event.which == 13) { $(this).next('input').focus(); event.preventDefault(); } });
我试过了，但是 enter press 被忽略了。控制台日志包含[input.ui-input-text ui-body-a, context: input.ui-input-text ui-body-a, jquery: "1.9.1", constructor: function, init: function, selector: ""…]

【解决方案2】：

首先，如上一个答案所述，抓住输入，然后识别下一个输入字段并对其调用 .focus() 方法。

$(form).on('keyup', 'input', 
    function(event)
    {
        if(event.which() == 13)
        {
            event.preventDefault(); //this prevents the default, as was previouslynoted

            $.each($('input'), 
                function(index, input)
                {
                    if(input == this)
                    {
                       $('input')[index+1].focus();
                    }
                });
        }
    });

【讨论】：

谢谢。我试过这个但有异常。我更新了问题并提供了异常信息。如何解决？

【解决方案3】：

您可以使用 jQuery 来阻止它，如下所示：

$(document).on('keyup', 'input', function(event){
    if(event.which()===13){ // 13 is the keyCode of enter Key
        event.preventDefault();
    }
});

【讨论】：