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

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

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

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

使用jQuery，jQuery-mobile ASP.NET MVC4。应用程序正在使用其基于 WebKit 的浏览器在摩托罗拉 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>

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

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

演示

首先，按照上一个答案的说明，抓住回车键，然后确定下一个输入字段并对其调用 .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();
                    }
                });
        }
    });

你可以

用jQuery阻止它，如下所示：

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

相关内容

最新更新

热门标签：