信用卡号自动分隔需避免oninput直接改value导致光标跳位，应监听input事件、用setselectionrange维护光标，并处理退格/粘贴等场景；ios需禁用autocapitalize和autocorrect，设autocomplete="cc-number"；用等宽字体和固定宽度空格确保显示稳定；前端仅作体验优化，后端仍须清洗空格并校验luhn算法。
信用卡号输入时自动加空格分隔，但别用 oninput 直接操作 value
直接在 oninput 里改 value 会破坏光标位置，尤其在中间编辑时跳位严重。正确做法是监听 input 事件，用 setSelectionRange 手动维护光标偏移。
- 先提取纯数字：
input.value.replace(/\s/g, '') - 每 4 位插入一个空格：
num.match(/.{4}/g)?.join(' ') || '' - 计算原始光标位置在新字符串中的对应索引，再调
input.setSelectionRange() - 注意处理退格、删除、粘贴等场景——粘贴后需重新 normalize 格式
移动端 iOS Safari 输入时禁用自动大写和拼写检查
iOS 键盘默认对 input 启用 autocapitalize 和 autocorrect，会导致信用卡号输入异常（比如把 “4567” 自动改成 “4567.”）。必须显式关闭。
- 加属性：
autocapitalize="off" autocorrect="off" autocomplete="off" -
autocomplete="off"不够，iOS 仍可能缓存；更稳妥的是用autocomplete="cc-number"（符合 W3C 规范，且触发原生信用卡键盘） - 避免用
type="number"：它会弹出数字键盘但禁止空格和连字符，反而破坏分隔逻辑
用 CSS 控制空格显示与宽度，防止布局抖动
单纯插入空格字符（U+0020）在不同字体下宽度不一致，缩放或换行时容易错位。应统一用 font-variant-numeric: tabular-nums + 固定字符宽度控制。
- 给输入框设
font-family: 'SFMono-Regular', Consolas, monospace，确保数字等宽 - 用
letter-spacing替代空格？不行——它会影响所有字符，包括用户正在输入的那一位 - 真正稳定的做法：保持空格字符，但限制
width和max-width，并设overflow: hidden防止撑开容器 - 测试关键断点：输入第 4、8、12、16 位时，是否触发换行或横向滚动
校验阶段别只依赖前端格式，但要即时反馈格式错误
前端加空格只是体验优化，后端仍需清洗掉空格再校验 Luhn 算法。但用户输入过程中就该知道当前是否“看起来像有效卡号”。
- 实时检查长度：16 位（Visa/MC）、15 位（AMEX）、14 位（Diners）等，用
input.value.replace(/\s/g, '').length - 检测开头数字组合：
4xxx是 Visa，5[1-5]xx是 Mastercard，3[47]xx是 AMEX —— 用于切换卡标图标 - 不要在用户还没输完时标红报错；只在失去焦点（
blur）或输入满 16 位后才触发 Luhn 校验 - 记住：Luhn 校验通过 ≠ 卡号真实有效，仅防明显录入错误
空格是视觉糖，不是数据结构。所有分隔逻辑必须可逆、无损、不影响复制粘贴——用户全选复制时，应该得到带空格的字符串，但粘贴到别处时，系统得能自动剥离空格再校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
