CodeIgniter中Div内文本框按maxlength自动切换焦点问题求助

嘿，我一眼就看出问题所在啦！你写的$(this).next('.inputs')之所以失效，是因为**next()方法只能查找当前元素的同级下一个兄弟元素**，但你的每个输入框都被包裹在独立的.in div里，甚至还分属不同的.form-group容器，它们根本不是同级元素，所以自然找不到下一个目标输入框~

修复方案一：基于父容器定位（依赖现有DOM结构） #

我们可以先找到当前输入框所在的.form-group，再定位到下一个.form-group里的输入框，代码修改如下：

$(".inputs").keyup(function() { 
    // 先过滤非数字字符（可以把input标签里的onkeyup逻辑移到这里统一处理）
    this.value = this.value.replace(/[^0-9]/g,'');
    
    if (this.value.length == this.maxLength) { 
        // 找到当前输入框所在的.form-group，再找下一个.form-group中的inputs
        const nextInput = $(this).closest('.form-group').next().find('.inputs');
        // 如果找到下一个输入框，就聚焦过去
        if (nextInput.length) {
            nextInput.focus();
        }
    } 
});

修复方案二：基于输入框集合索引（更灵活，不依赖DOM结构） #

如果之后你的表单结构可能变动，推荐用这种方法：先获取所有.inputs的集合，找到当前输入框的索引，直接聚焦到下一个索引的输入框：

// 先获取所有输入框的集合，缓存起来提升性能
const allInputs = $(".inputs");

allInputs.keyup(function() { 
    this.value = this.value.replace(/[^0-9]/g,'');
    
    if (this.value.length == this.maxLength) { 
        // 获取当前输入框在集合中的索引
        const currentIndex = allInputs.index(this);
        // 获取下一个输入框
        const nextInput = allInputs.eq(currentIndex + 1);
        if (nextInput.length) {
            nextInput.focus();
        }
    } 
});

额外优化建议 #

你原来的input标签里写了onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"，可以把这段逻辑移到jQuery的keyup事件里，这样代码更集中，也方便后续维护，同时避免原生事件和jQuery事件的潜在冲突。

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