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()只能看到兄弟姐妹。在你的情况下，该字段位于父母的兄弟姐妹内部，因此您必须让父母的下一个兄弟找到下一个输入。

在旁注中，您可能希望跳过键盘事件中的某些键代码（例如箭头键）。

示例：

$(".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>

输入两个数字后，自动选项卡到下一个输入字段

1 个答案: