Question

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

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

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

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>

Answer 1

问题是下一个输入有时是一个按钮。这是一个JS小提琴，有一个可能的解决方案：

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'）确定当前正在编辑元素的索引。它递增索引并使用它来选择下一个元素。

$('#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();
    }
});

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

1 个答案: