jQuery实现输入框达maxlength后跨父容器自动聚焦下一个输入框问题

开发者阿泽

2026-10-5

DOB出生日期输入框自动跳转解决方案

你的代码核心问题是DOM节点遍历逻辑不符合你的HTML结构，具体错误和修复方案如下：

问题原因

你的每个.input输入框都单独包裹在.question父容器内：

原代码$(this).next('.input')：只查找当前输入框的同级元素，你当前输入框的同级没有其他.input元素，自然找不到下一个输入框
你修改后的$(this).parent(".question").next('.input')：父元素.question的下一个同级元素是另一个.question容器，不是.input元素，匹配规则错误所以也找不到目标

修复后的JS代码

$(function() {
  $(".input").keyup(function() {
    if (this.value.length == this.maxLength) {
      // 1. 先找到当前输入框所属的question容器
      const $currentQuestion = $(this).closest('.question');
      // 2. 找到下一个question容器，再查找里面的input元素
      const $next = $currentQuestion.next('.question').find('.input');
      if ($next.length) {
        $next.focus();
      } else {
        $(this).blur();
      }
    }
  });
});