如何实现输入信用卡号时每4位数字自动添加空格？

首先是你的输入框HTML结构：

<input type="text" maxlength="19" placeholder="0000 0000 0000 0000" id="creditCardInput">

下面提供两种实现方式，优先推荐带光标位置处理的版本，能保证更好的用户体验：

带光标位置处理的完整实现 #

这个版本会在格式化文本时保持光标位置，避免用户输入时光标突然跳转到末尾：

const creditCardInput = document.getElementById('creditCardInput');

creditCardInput.addEventListener('input', function(e) {
    // 记录当前光标位置
    const currentCursorPos = e.target.selectionStart;
    // 保存旧值用于计算空格变化量
    const oldValue = e.target.value;
    // 过滤所有非数字字符，只保留纯数字
    const rawDigits = e.target.value.replace(/\D/g, '');
    // 将纯数字按每4位分割，用空格拼接成格式化后的字符串
    const formatted = rawDigits.match(/.{1,4}/g)?.join(' ') || '';
    
    e.target.value = formatted;
    
    // 计算光标需要调整的偏移量：新值中光标前的空格数减去旧值中光标前的空格数
    const newSpaceCount = (formatted.slice(0, currentCursorPos).match(/ /g) || []).length;
    const oldSpaceCount = (oldValue.slice(0, currentCursorPos).match(/ /g) || []).length;
    let newCursorPos = currentCursorPos + (newSpaceCount - oldSpaceCount);
    
    // 确保光标位置在合法范围内
    newCursorPos = Math.max(0, Math.min(newCursorPos, formatted.length));
    e.target.setSelectionRange(newCursorPos, newCursorPos);
});

简化版（无光标位置处理） #

如果对光标体验要求不高，可以用更简洁的写法，但输入过程中光标会自动跳到末尾：

const creditCardInput = document.getElementById('creditCardInput');

creditCardInput.addEventListener('input', function() {
    // 过滤非数字后按4位分割拼接
    this.value = this.value.replace(/\D/g, '').match(/.{1,4}/g)?.join(' ') || '';
});

关键逻辑说明 #

• replace(/\D/g, '')：彻底过滤输入中的非数字字符，保证输入内容只有数字
• match(/.{1,4}/g)?.join(' ')：将纯数字字符串分割为每4位一组，用空格连接，?.运算符处理空输入的情况
• 光标位置处理：核心是计算格式化前后光标位置的偏移量，确保用户输入时光标不会乱跑，这是提升体验的关键

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