javascript - 移动到表内 keyup 上的下一个输入字段

Question

我的表在 td 内的 1 行中包含多个输入。我需要在任何数字的按键上跳转到下一个输入。我的代码在没有 table 标记的情况下工作，如果添加 table 标记，则停止工作。这是链接和代码 JSFIDDLE

$(".transition").keyup(function() {
  if (this.value.length == this.maxLength) {
    $(this).next('.transition').focus();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="border-box"><input class="border-box transition" type="text" name="d1" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d2" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d3" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d4" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d5" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d6" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d7" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
    </tr>
  </tbody>
</table>

Answer 1

.next('.transition') 查找同级，并且由于 input 不是其 td< 的唯一子级s，顺便说一句，它们是 sibling ，这是行不通的。

而是这样做，您可以在其中获取其.parent()，然后使用next()获取下一个td，最后.find('.transition') 查找输入

$(this).parent().next().find('.transition').focus();

堆栈片段

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="border-box"><input class="border-box transition" type="text" name="d1" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d2" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d3" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d4" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d5" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d6" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
      <td class="border-box"><input class="border-box transition" type="text" name="d7" placeholder="X" maxlength="1" pattern="\d*" value=""></td>
    </tr>
  </tbody>
</table>