输入达到maxlength时脚本未自动跳转至下一个输入字段问题排查

先看你代码里的致命错误 #

• 变量名不匹配：你定义的变量是InputContainer，但绑定事件时用了未声明的container，这直接导致事件根本绑定不上，是功能失效的核心原因。
• 脚本执行时机不对：如果你的脚本写在页面顶部，DOM还没加载完就执行的话，document.getElementsByClassName("InputContainer")[0]会拿到null，事件绑定自然无效。

还有逻辑上的坑 #

• keyup事件+长度判断的问题：当输入到maxlength时，浏览器会自动截断输入，keyup触发时长度可能刚好等于最大值，但如果用户按住按键不放，逻辑可能不顺畅；另外你现在的判断是myLength >= maxLength，但maxlength限制下长度不可能超过最大值，改成myLength === maxLength更准确。
• 跳转上一个输入框的逻辑太宽泛：只要输入框为空就跳转，比如用户手动清空输入框也会触发，应该限制成只有按退格键且内容为空时才跳转。
• 获取maxlength的方式不够稳：用target.attributes["maxlength"].value如果元素没这个属性会直接报错，不如用DOM自带的target.maxLength属性，更可靠还不用手动转数字。

修复后的完整代码 #

// 等页面DOM加载完再执行脚本，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
    // 获取容器元素，加个判断避免找不到时报错
    const inputContainer = document.getElementsByClassName("InputContainer")[0];
    if (!inputContainer) return;

    // 给容器绑定keyup事件
    inputContainer.addEventListener('keyup', function(e) {
        const target = e.target;
        // 只处理input元素，避免其他元素触发逻辑
        if (target.tagName.toLowerCase() !== 'input') return;

        const maxLength = target.maxLength;
        const currentLength = target.value.length;

        // 达到最大长度，跳转到下一个input
        if (currentLength === maxLength) {
            let nextEl = target.nextElementSibling;
            while (nextEl) {
                if (nextEl.tagName.toLowerCase() === 'input') {
                    nextEl.focus();
                    break;
                }
                nextEl = nextEl.nextElementSibling;
            }
        }
        // 按退格键且当前内容为空，跳转到上一个input
        else if (e.key === 'Backspace' && currentLength === 0) {
            let prevEl = target.previousElementSibling;
            while (prevEl) {
                if (prevEl.tagName.toLowerCase() === 'input') {
                    prevEl.focus();
                    break;
                }
                prevEl = prevEl.previousElementSibling;
            }
        }
    });
});

额外要检查的点 #

1. 确认你的.InputContainer容器确实包裹了所有需要联动的输入框；
2. 检查输入框的maxlength属性是否正确设置（比如有没有写成max-length这种错误格式）；
3. 打开浏览器F12控制台，看看有没有其他脚本报错，可能会影响这个功能执行；
4. 如果输入框被其他元素（比如div、label）嵌套，nextElementSibling可能找不到下一个input，这时候可以改成用target.parentElement.nextElementSibling.querySelector('input')这种方式来查找，具体根据你的DOM结构调整。

内容的提问来源于stack exchange，提问作者Just As I Am