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

Posted 2023-05-09

技术标签:

【中文标题】如何强制进入表单中的活动下一个输入字段【英文标题】：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>

【问题讨论】：

【参考方案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();
    
);

【讨论】：

以上是关于如何强制进入表单中的活动下一个输入字段的主要内容，如果未能解决你的问题，请参考以下文章

如何将 django 表单输入转换为 python 数据？

如何强制输入日期格式为 dd/mm/yyyy？ [复制]

在重置JSF + PrimeFaces中的表单之前，检查一些必需的输入字段

如何在反应中验证多步表单

专注于下一个输入不起作用以及当用户在最后一个输入字段时如何提交表单

如何根据 Access 2013 中的另一个输入字段更新表单上的字段？