在输入时激活表单中的下一个输入字段答案

【问题标题】：Activating next input field in form on enter在输入时激活表单中的下一个输入字段
【发布时间】：2013-10-26 18:31:22
【问题描述】：

订单输入表单包含多行的产品代码和数量列以及删除按钮 (-) 在每一行的末尾。它还包含在第一列和表单之后添加按钮。

按回车键应将焦点设置到下一个文本或数字输入字段（产品代码或数量），跳过按钮。

我尝试使用下面的代码，但输入键被忽略。

Chrome 调试器显示行 $(this).next('input').focus() 已执行但 focus() 调用没有任何效果。

使用jquery、jquery-mobile、ASP.NET MVC4

<!DOCTYPE html>
<html>
<head>
  <script src="/Scripts/jquery/jquery-1.9.1.js"></script>
</head>
<body>
  <div data-role="page" data-theme="a">
 <div data-role="content">
<script>
  $(function () {
    $('#inputform').on('keydown', 'input', function (event) {
      if (event.which == 13) {
        $(this).next('input').focus();
        event.preventDefault();
      }
    });
  });
</script>
<form id='inputform' method="post" 
   action ="/Detail/SaveFullDocument?_entity=DokG&amp;_id=0">
  <fieldset>
<div class='form-field' >
<label class='form-label' for='Tasudok'>Order number</label>
<input class='ui-widget-content ui-corner-all form-fullwidth'  id='Tasudok' name='Tasudok'  value=''  maxlength='25' /></div>

  <input type="hidden" name="_rows" />

  <table id="tableId">
    <tr>
      <th>Product code</th>
      <th>Quantity</th>
      <td>
        <input type="button" value="+" onclick="addRow('tableId')" /></td>
    </tr>

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

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

    </div>
  </div>
</body>
</html>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

问题是下一个输入有时是一个按钮。这是一个带有可能解决方案的 JS Fiddle：

http://jsfiddle.net/hxZSU/1/

我已经为作为用户输入的 html 元素添加了一个数据属性。该属性还包含一个递增索引，以便您可以控制获得焦点的元素的顺序。

以下是 HTML 更改：

<input class='ui-widget-content ui-corner-all form-fullwidth' data-index="1" id='Tasudok' name='Tasudok' value='' maxlength='25' />
<input type="text" name="Toode" class="my-input" data-index="2" />
<input type="number" name="Kogus" data-index="3" />

这是将在输入字段之间移动的新 JavaScript 事件。它将使用 $(event.target).attr('data-index') 确定当前正在编辑的元素的索引。它增加索引并使用 this 选择下一个元素。

$('#inputform').on('keydown', 'input', function (event) {
    if (event.which == 13) {
        event.preventDefault();
        var $this = $(event.target);
        var index = parseFloat($this.attr('data-index'));
        $('[data-index="' + (index + 1).toString() + '"]').focus();
    }
});

【讨论】：

这很好用。我建议添加 input[type=text] 作为选择器，以便输入键在提交时起作用（或使用按钮作为提交）。

【解决方案2】：

html位

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</style>
</head>
<body>

<form id= 'form' >
      <input onkeydown='handleEnter(event)' placeholder="field 1" /><br>
      
      <input onkeydown='handleEnter(event)' placeholder="field 2" /><br>
      <input placeholder="field 3" />
    </form>

</body>
</html>

JavaScript 位

function handleEnter(event) {
   if (event.key==="Enter") {
      const form = document.getElementById('form')
      const index = [...form].indexOf(event.target);
      form.elements[index + 1].focus();
      //event.preventDefault();
    }
}

【讨论】：