当输入填充 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>

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

Auto move to next tab when an input fills with 1 integer

javascript

jquery

keyup