输入两个数字后，自动按 Tab 键转到下一个输入字段

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

附带说明一下，您可能希望在 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>