Jquery .next()无法定位并聚焦分组中的下一个输入项问题

你用的$(this).next('.single-digit')有局限——jQuery的.next()只找紧邻的下一个同级元素，但你的输入框后面跟着的是<span>标签，不是目标输入框，所以这个方法根本找不到下一个要聚焦的输入框，自然没法完成跳转。

把跳转逻辑改成用.nextAll()方法，它会查找当前元素之后所有同级的匹配元素，再用.first()取第一个目标输入框，就能跳过中间的<span>了：

$('.single-digit').on('input', function() {
  if ($(this).val().length == $(this).attr('maxlength')) {
    $(this).nextAll('.single-digit').first().focus();
  }
});

要是想让体验更完善，还可以加个回退逻辑——删除内容时自动跳回上一个输入框：

$('.single-digit').on('input', function() {
  const $input = $(this);
  if ($input.val().length == $input.attr('maxlength')) {
    $input.nextAll('.single-digit').first().focus();
  }
}).on('keydown', function(e) {
  const $input = $(this);
  // 按下退格键且当前输入框为空时，跳回上一个输入框
  if (e.key === 'Backspace' && !$input.val()) {
    $input.prevAll('.single-digit').first().focus();
  }
});

修改后，输入框内容达到最大长度时，会自动跳过中间的分隔<span>，精准定位并聚焦到下一个数字输入框，完美解决跳转失效的问题。

内容的提问来源于stack exchange，提问作者Dorvalla