当输入填充1个整数时，自动移动到下一个选项卡

Question

如何在填充1个整数时移动到下一个输入字段。当我在输入字段中输入一个整数时，它不会移动到下一个输入字段

jq = $
jq(".pc").keyup(function() {
var nextItem = parseInt(this.id) + 1;
console.log(nextItem);
jq(this).next('.pc').focus();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2">
<input class="form-control pc" id="1" type="text" name="pc1" />
</div>
<div class="col-md-2">
<input class="form-control pc" id="2" type="text" name="pc2" />
</div>
<div class="col-md-2">
<input class="form-control pc" id="3" type="text" name="pc3" />
</div>

Answer 1

pc不是兄弟，您需要先转到父级，然后转到其兄弟级才能找到.pc

所以你需要使用$(this).parent().next().find('.pc').focus();

$(".pc").on('keyup', function() {
const nextItem = parseInt(this.id) + 1;
$(this).parent().next().find('.pc').focus();
console.log(nextItem);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2">
<input class="form-control pc" id="1" type="text" name="pc1" />
</div>
<div class="col-md-2">
<input class="form-control pc" id="2" type="text" name="pc2" />
</div>
<div class="col-md-2">
<input class="form-control pc" id="3" type="text" name="pc3" />
</div>

Answer 2

当更改HTML时，此代码将工作事件我为您创建了此函数并使用了onkeyup事件。

这将允许您在最后一次输入时禁用此操作

建议：在使用对象或元素时使用干净的名称，例如将pc更改为personalCode:p

这将在未来帮助您

function jumpToNextPcInput(currentIndex){
currentIndex++;
document.getElementById('pc'+currentIndex).focus();
}

<div class="col-md-2">
<input type="text" class="form-control pc" onkeyup="jumpToNextPcInput(1)" id="pc1" />
</div>
<div class="col-md-2">
<input type="text" class="form-control pc" onkeyup="jumpToNextPcInput(2)" id="pc2" />
</div>
<div class="col-md-2">
<input type="text" class="form-control pc" id="pc3" />
</div>