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

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

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

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

3 回答 3

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

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

演示

于 2013-10-26T13:44:11.330 回答
0

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

$(document).on('keyup', 'input', function(event){
    if(event.which()===13){ // 13 is the keyCode of enter Key
        event.preventDefault();
    }
});
于 2013-10-26T13:16:35.340 回答
0

首先，抓住输入，如上一个答案所述，然后识别下一个输入字段并在其上调用 .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();
                    }
                });
        }
    });
于 2013-10-26T13:22:25.863 回答