真正可用的信用卡号输入框需实现「实时格式化 + 光标位置保护 + 删除逻辑适配」；应优先用 beforeinput 事件结合 inputType 判断操作类型，清除非数字后按卡组织规则（如Visa 4-4-4-4、Amex 4-6-5）分组，禁用硬编码空格与强制截断。
信用卡号输入框不是简单加个 input type="text" 就完事——用户随手输一串 16 位数字，没有空格或分组，校验难、易出错、体验差。真正可用的实现，核心在于「实时格式化 + 光标位置保护 + 删除逻辑适配」，三者缺一不可。
为什么直接用 oninput + replace 会崩光标
常见写法是监听 oninput，把值用正则 .replace(/(\d{4})(?=\d)/g, '$1 ') 加空格，再赋回 value。问题立刻出现：用户在中间删一位，光标会跳到末尾；粘贴一串数字后光标卡在开头；连续删除时分组错乱。
- 根本原因是：DOM 输入框的光标位置（
selectionStart/selectionEnd）在值被重写后不会自动对齐新字符串 - 浏览器不保证
input事件触发时的光标状态和你重设value后的一致性 - 正则替换未区分插入/删除场景，比如用户删掉一个空格，逻辑却当成新增数字处理
beforeinput 事件比 input 更可靠
beforeinput 在浏览器实际修改值之前触发，能拿到原始输入行为类型（insertText、deleteContentBackward 等），配合 getSelection() 可精准计算光标应处位置。
- 监听
beforeinput，用event.inputType判断操作类型，避免盲目替换 - 读取当前
input.value和selectionStart，模拟格式化后的字符串，再反推光标在新字符串中的合理位置 - 调用
event.preventDefault()阻止默认行为，再手动设置input.value和setSelectionRange() - 注意兼容性：
beforeinput在 Safari 16.4+ 和 Chrome/Firefox 中稳定，旧 Safari 需降级到input+ 光标修复逻辑
格式化规则必须匹配真实卡组织模式
别硬写死「每 4 位加空格」。Visa 是 4-4-4-4，Amex 是 4-6-5，Diners 是 4-6-4，而且卡号长度本身就有 13–19 位差异。前端格式化只是辅助，不能替代后端 Luhn 校验。
立即学习“前端免费学习笔记（深入）”；
- 建议先用
value.replace(/\D/g, '')清除所有非数字字符，再按目标卡组织规则分组（可结合卡号前缀识别，如^4是 Visa，^3[47]是 Amex） - 不要在输入过程中强制补零或截断——用户可能正在输入，提前截成 16 位会误杀 19 位的 Diners 卡
- 显示空格用普通 ASCII 空格（
' '），别用 或 \u2007，否则复制粘贴会带多余字符 - 示例片段（简化版）：
function formatCardNumber(value) { const digits = value.replace(/\D/g, ''); if (digits.length <= 4) return digits; if (digits.length <= 8) return `${digits.slice(0,4)} ${digits.slice(4)}`; if (digits.length <= 12) return `${digits.slice(0,4)} ${digits.slice(4,8)} ${digits.slice(8)}`; return `${digits.slice(0,4)} ${digits.slice(4,8)} ${digits.slice(8,12)} ${digits.slice(12)}`; }
移动端软键盘与粘贴行为必须单独处理
安卓微信、iOS 原生键盘的粘贴行为常绕过 beforeinput，且部分机型会触发两次 input。不处理就会出现「粘贴 1234567890123456，显示成 1234 5678 9012 3456 」但光标停在开头，用户无法继续输入。
- 监听
paste事件，event.preventDefault()，读取event.clipboardData.getData('text')，清洗、格式化后插入 - 对
compositionstart/compositionend做标记，避免中文输入法上屏时重复格式化 - iOS Safari 对
setSelectionRange的支持有延迟，建议加setTimeout(..., 0)微任务兜底 - 测试真机：重点看微信内置浏览器、iOS 17 Safari、三星键盘，模拟器容易漏掉光标跳变问题
最麻烦的从来不是怎么加空格，而是当用户删掉第 8 位后面的数字时，前面的空格要不要消失、光标该锚定在空格前还是后——这些细节没在真机上反复敲过几十次，写的代码看起来能跑，一上生产就露馅。
