Contact Form 7 拆分生日输入框实现自动跳转下一字段问题求助

云上老周

2026-9-28

问题核心原因

你之前的跳转逻辑失效是因为3个带.inputs类的输入框分别被嵌套在独立的grve-column-1-3层级容器中，不是直接相邻的兄弟节点，jQuery(this).next('.inputs')无法匹配到下一个输入框元素。

可用实现代码

你可以直接使用以下代码，放在Contact Form 7表单编辑区域的最底部即可生效：

jQuery(document).ready(function() {
    // 按页面渲染顺序获取所有出生日期输入框集合
    const dobInputs = jQuery('.inputs');
    dobInputs.on('keyup', function() {
        const currentInput = jQuery(this);
        // 仅输入长度达到最大限制时触发跳转
        if (currentInput.val().length >= this.maxLength) {
            // 获取当前输入框的索引位置
            const currentIndex = dobInputs.index(currentInput);
            // 非最后一个输入框时跳转到下一个
            if (currentIndex < dobInputs.length - 1) {
                dobInputs.eq(currentIndex + 1).focus();
            }
        }
    });
});