表单输入中的退格和格式化

Question

我正在开展一个学校项目，创建一个“网上商店”（它只是为了练习 - 不是真实的）。

我正在尝试格式化用户卡号的输入，使其看起来像：

1234 5678 9101 1112。

输入卡号格式时可以正常工作，但当用户开始退格时，就会出现问题。

在字符串中退格时一切都很好 - 我创建了一个跳过空格的函数，并确保用户无法与它们交互，但是当我们到达前 4 位数字 (1234) 时，退格一次会删除两个字符而不是一个，我不明白为什么。

这是我在卡号输入字段中处理退格键和格式的代码：

//handle formatting for the cardnumber
formatCardNumber(value) {
        let formattedValue = value.replace(/\D/g, ''); // Remove all non-digit characters
        // Insert a space after every 4 digits
        if (formattedValue.length <= 16) {
            formattedValue = formattedValue.replace(/(\d{4})(?=\d)/g, '$1 ');
        } else {
            formattedValue = formattedValue.substring(0, 16); // Limit to 16 digits
            formattedValue = formattedValue.replace(/(\d{4})(?=\d)/g, '$1 '); // Add spaces
        }
        return formattedValue; // Return the formatted value
    },

    // Handle backspace behavior specifically for card number inputs
    handleCardNumberBackspace(cardNumberInput, e) {
        if (e.key === 'Backspace') { // Check if the Backspace key is pressed
            let value = cardNumberInput.value.replace(/\D/g, ''); // Remove spaces and non-digits
            let cursorPos = cardNumberInput.selectionStart; // Get the current cursor position

            if (cursorPos > 0 && cardNumberInput.value[cursorPos - 1] === ' ') { 
                // If the cursor is before a space, remove the preceding digit and the space
                cardNumberInput.value = value.substring(0, cursorPos - 1) + value.substring(cursorPos);
                cardNumberInput.setSelectionRange(cursorPos - 1, cursorPos - 1); // Update cursor position
            } else {
                // Remove the digit at the cursor position
                cardNumberInput.value = value.substring(0, cursorPos - 1) + value.substring(cursorPos);
                cardNumberInput.setSelectionRange(cursorPos - 1, cursorPos - 1); // Update cursor position
            }

            cardNumberInput.value = this.formatCardNumber(cardNumberInput.value); // Reapply formatting
        }
    },

Answer 1

我认为你把事情搞得太复杂了。这是一种无需处理不同击键的简化方法：

document.getElementById('card').addEventListener('input', e => {
  e.target.value = e.target.value
    .replace(/\D/g, '')                // remove all non-digital characters
    .replace(/^(\d{16}).+/g, '$1')     // truncate its length to 16
    .replace(/\d{4}(?=\d)/g, '$& ');   // pad spaces
});

<input id="card">