验证码表单输入值同步问题及条件显示需求

问题根源分析 #

你的代码目前的核心问题在于用code.push(val)来收集验证码，这只会追加新值，不会同步更新已输入框的修改内容。比如用户修改第2位数字时，旧的第2位值还留在数组里，导致黄色输入框无法正确更新。另外，逻辑里的$(this).each完全多余（当前触发事件的就是单个input元素），同时也没处理退格删除的场景，导致交互逻辑不完整。

修正后的实现代码 #

我们需要每次输入变化时，重新收集所有4个输入框的值，而不是依赖追加数组。同时优化焦点切换逻辑，覆盖数字输入、退格删除等常见操作：

// 监听所有验证码输入框的keyup和input事件（覆盖键盘输入、粘贴、删除等操作）
$('.verf-code input').on('keyup input', function(e) {
    var $inputs = $('.verf-code input');
    var codeValues = [];
    var currentIndex = $inputs.index(this);
    
    // 遍历收集所有输入框的有效数字值
    $inputs.each(function() {
        var val = $(this).val().trim();
        // 只保留单个数字字符，非数字内容视为空
        if (/^\d$/.test(val)) {
            codeValues.push(val);
        } else {
            codeValues.push('');
        }
    });
    
    // 优化焦点切换逻辑，提升用户体验
    var key = e.which;
    // 数字键（0-9）：当前输入有值时，自动跳转到下一个输入框
    if (key >= 48 && key <= 57 && currentIndex < 3 && $(this).val()) {
        $inputs.eq(currentIndex + 1).focus();
    }
    // 退格键：当前输入为空时，自动跳转到上一个输入框
    else if (key === 8 && currentIndex > 0 && !$(this).val()) {
        $inputs.eq(currentIndex - 1).focus();
    }
    
    // 严格按照需求更新黄色输入框
    var fullCode = codeValues.join('');
    if (fullCode.length === 4) {
        $('.verification-code').val(fullCode);
    } else {
        $('.verification-code').val('');
    }
});

.verification-code { background: yellow; }
/* 可选：给验证码输入框加样式，让交互更清晰 */
.verf-code input {
    width: 35px;
    height: 35px;
    text-align: center;
    margin: 0 6px;
    font-size: 18px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="verf-code">
    <input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="1" />
    <input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="2" />
    <input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="3" />
    <input class="afc-form__item__input" name="verf" type="text" maxlength="1" tabindex="4" />
</div>
<input type="text" class="verification-code">

关键改进点 #

• 实时同步所有输入值：每次触发事件时重新遍历收集所有输入框的值，确保修改任何一个输入框都会同步更新结果。
• 覆盖全操作场景：用keyup input事件组合，不仅处理键盘输入，还覆盖粘贴、鼠标删除等非键盘操作。
• 精准的交互逻辑：处理数字输入后的自动下跳，以及退格时的自动上跳，符合用户输入验证码的习惯。
• 严格的内容校验：用正则/^\d$/确保只收集有效数字，避免非数字内容干扰结果。
• 完全匹配需求：只有当4个输入框都有有效数字时，才显示完整验证码，否则清空黄色输入框。

内容的提问来源于stack exchange，提问作者Jack The Baker