银行卡号输入框退格异常：退至前4位时一次删两字符求助

问题根源 #

1. 未阻止默认退格行为：按下Backspace时，浏览器原生删除操作和自定义删除逻辑同时执行，导致两次删除叠加，出现一次删两个字符的情况。
2. 光标位置映射错误：直接用带空格的输入框光标位置操作纯数字字符串，两者位置不匹配（输入框位置包含空格，纯数字串无空格），导致特定场景下删除逻辑出错。

修复后的代码 #

// 格式化银行卡号
formatCardNumber(value) {
    let formattedValue = value.replace(/\D/g, ''); // 移除所有非数字字符
    // 每4位数字后插入空格，最多16位
    if (formattedValue.length <= 16) {
        formattedValue = formattedValue.replace(/(\d{4})(?=\d)/g, '$1 ');
    } else {
        formattedValue = formattedValue.substring(0, 16);
        formattedValue = formattedValue.replace(/(\d{4})(?=\d)/g, '$1 ');
    }
    return formattedValue;
},

// 处理银行卡号输入框的退格行为
handleCardNumberBackspace(cardNumberInput, e) {
    if (e.key === 'Backspace') {
        // 阻止浏览器默认退格行为，避免重复删除
        e.preventDefault();
        
        const rawValue = cardNumberInput.value;
        const pureDigits = rawValue.replace(/\D/g, '');
        const cursorPos = cardNumberInput.selectionStart;

        // 计算带空格的光标位置对应的纯数字位置（减去前面的空格数量）
        const spaceCount = (rawValue.substring(0, cursorPos).match(/ /g) || []).length;
        let pureCursorPos = cursorPos - spaceCount;

        // 只有纯数字长度大于0时才执行删除
        if (pureCursorPos > 0) {
            // 删除纯数字串中对应位置的字符
            const newPureDigits = pureDigits.substring(0, pureCursorPos - 1) + pureDigits.substring(pureCursorPos);
            // 重新格式化
            const newFormattedValue = this.formatCardNumber(newPureDigits);
            // 计算新的光标位置：纯数字位置-1 转换为带空格的位置
            const newPureCursorPos = pureCursorPos - 1;
            const newSpaceCount = Math.floor(newPureCursorPos / 4);
            // 处理删除后刚好是4的倍数的情况，避免光标跑到不存在的空格后
            let newCursorPos = newPureCursorPos + newSpaceCount;
            if (newPureDigits.length > 0 && newPureDigits.length % 4 === 0) {
                newCursorPos -= 1;
            }
            // 确保光标位置不越界
            newCursorPos = Math.max(0, Math.min(newCursorPos, newFormattedValue.length));

            cardNumberInput.value = newFormattedValue;
            cardNumberInput.setSelectionRange(newCursorPos, newCursorPos);
        }
    }
}

关键修改点 #

• 新增e.preventDefault()：彻底阻止原生退格操作，确保只有自定义逻辑生效。
• 光标位置转换：先将输入框光标位置（含空格）转换为纯数字串的位置，删除后再转换回带空格的光标位置，避免位置错位。
• 边界处理：针对删除后长度为4的倍数的场景，调整光标位置，避免光标定位到不存在的空格后方。

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