Question

我想在到达每个字段的input时自动切换到下一个maxlength字段。每个输入字段都放在cell中的table中。

<table border="0" cellpadding="1" cellspacing="1" class="td1202">
<tbody>
        <tr>
        <td>&nbsp;</td>
        <td><input maxlength="1" type="text" style="width: 20px;"></td>
        <td><input maxlength="1" type="text" style="width: 20px;"></td>
        <td class="decimal">,</td>
        <td><input maxlength="1" type="text" style="width: 20px;"></td>
        <td><input maxlength="1" type="text" style="width: 20px;"></td>
        <td><input maxlength="1" type="text" style="width: 20px;"></td>
    </tr>
</tbody>

到目前为止，我已经尝试过：

$("input").keyup(function() {
 if (this.value.length == this.maxLength) {
$(this)
  .blur()
  .parent()
  .next()
  .children('input')
  .focus();
}
});

Answer 1

说明：

您的代码不起作用，因为您有<td class="decimal">,</td>，并且由于该原因代码无法找到下一个input子代，因此它在前两次输入后停止工作。如果<td class="decimal">,</td>不存在，您的代码将起作用。

解决方案：

您可以简单地找到下一个输入的索引，而不用检查子级等。

下面是工作示例：

$("input").keyup(function() {
  if (this.value.length == this.maxLength) {
    var index = $(this).index("input");
    $("input:eq(" + (index + 1) + ")").focus();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0" cellpadding="1" cellspacing="1" class="td1202">
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td><input maxlength="1" type="text" style="width: 20px;"></td>
      <td><input maxlength="1" type="text" style="width: 20px;"></td>
      <td class="decimal">,</td>
      <td><input maxlength="1" type="text" style="width: 20px;"></td>
      <td><input maxlength="1" type="text" style="width: 20px;"></td>
      <td><input maxlength="1" type="text" style="width: 20px;"></td>
    </tr>
  </tbody>

自动跳到表格单元格中的下一个输入字段

1 个答案: