Question

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

如何阻止输入表单提交：输入应该像tab一样，它必须：

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

使用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>

Answer 1

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

如果你需要在输入时关注下一个元素，那么就不需要遍历所有输入，因为$(this)将是目标元素。

<强> DEMO

Answer 2

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

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

Answer 3

首先，按照前面的答案解释输入，然后识别下一个输入字段并在其上调用.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 个答案: