javascript - 输入两个数字后自动切换到下一个输入字段

Question

我正在创建一个表单，该表单的一部分是三个字段，每个字段都需要输入两个数字。当有人在第一个字段中输入了两位数时，我希望他们自动移动到第二个字段，然后在他们在第二个字段中输入两个数字时自动移动到第三个。

这是我的代码 - 不幸的是它无法正常工作，我将非常感谢任何帮助:

<div class="en__field__element en__field__element--tripletext">
    <div class="en__field__item">
        <input id="en__field_supporter_NOT_TAGGED_11" type="text" class="en__field__input en__field__input--tripletext" name="supporter.NOT_TAGGED_11" value="" maxlength="2">
    </div>
    <div class="en__field__item">
        <input type="text" class="en__field__input en__field__input--tripletext" name="supporter.NOT_TAGGED_11" value="" maxlength="2">
    </div>
    <div class="en__field__item">
        <input type="text" class="en__field__input en__field__input--tripletext" name="supporter.NOT_TAGGED_11" value="" maxlength="2">
    </div>
</div>

$(".en__field__input.en__field__input--tripletext").keyup(function () {
if (this.value.length == this.maxLength) {
  var $next = $(this).next('.en__field__input.en__field__input--tripletext');
  if ($next.length)
      $(this).next('.en__field__input.en__field__input--tripletext').focus();
  else
      $(this).blur();
}
});

Answer 1

.next()只看 sibling 。在您的情况下，该字段位于 parent 的 sibling 中，因此您必须让 parent 的下一个 sibling 找到下一个输入。

附带说明一下，您可能希望在 keyup 事件中跳过某些键代码(例如箭头键)。

例子:

$(".en__field__input.en__field__input--tripletext").keyup(function() {
  if (this.value.length == this.maxLength) {

    $(this)
      .blur()
      .parent()
      .next()
      .children('.en__field__input.en__field__input--tripletext')
      .focus();
  }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="en__field__element en__field__element--tripletext">
  <div class="en__field__item">
    <input id="en__field_supporter_NOT_TAGGED_11" type="text" class="en__field__input en__field__input--tripletext" name="supporter.NOT_TAGGED_11" value="" maxlength="2">
  </div>
  <div class="en__field__item">
    <input type="text" class="en__field__input en__field__input--tripletext" name="supporter.NOT_TAGGED_11" value="" maxlength="2">
  </div>
  <div class="en__field__item">
    <input type="text" class="en__field__input en__field__input--tripletext" name="supporter.NOT_TAGGED_11" value="" maxlength="2">
  </div>
</div>