银行卡号分组需javascript实时控制，因pattern仅校验、maxlength含空格致数字位数不足；须监听input事件，用setselectionrange保持光标位置，处理删除、粘贴等场景并兼顾兼容性与无障碍。
为什么直接用 input 的 pattern 或 maxlength 无法实现银行卡号分组
因为分组（如 1234 5678 9012 3456）本质是格式化显示，不是原始数据校验；pattern 只做正则匹配，不干预输入过程，maxlength 会把空格也算进去，导致用户实际能输的数字变少。浏览器原生 input 不提供“格式化掩码”能力，必须靠 JavaScript 实时控制。
用 input 事件 + setSelectionRange 实现光标友好分组
关键点在于：不能简单地 value = value.replace(...)，否则光标总会跳到末尾。必须在格式化后手动恢复光标位置。常见错误是忽略删除操作（Backspace/Delete）时的逻辑，导致光标错位或重复空格。
- 监听
input事件，而非keydown—— 后者无法捕获粘贴、剪切板操作 - 先保存光标位置：
const pos = input.selectionStart - 清理所有非数字字符：
let digits = value.replace(/\D/g, '') - 按 4 位一组拼接：
digits.match(/.{4}/g)?.join(' ') || '' - 设置新值后，用
setSelectionRange把光标“推”到合理位置（比如在刚插入空格后跳过它）
处理粘贴场景：必须截断并重格式化整段内容
用户粘贴 1234567890123456 或 1234-5678-9012-3456 时，直接 replace(/\D/g,'') 是安全的，但要注意长度限制——国内银行卡通常是 16 或 19 位，超出应截断而非报错，否则破坏输入流体验。
- 粘贴后立即
event.preventDefault()，避免原生粘贴干扰格式化逻辑 - 从
clipboardData.getData('text')提取纯数字，截取前 19 位 - 格式化后赋值，并将光标设在末尾（用户大概率继续输，不需精确定位）
- 不要尝试解析卡 bin 或发卡行——那属于后端/SDK 职责，前端只负责呈现
兼容性与无障碍注意事项
IE 11 已不支持 setSelectionRange 在某些状态下的行为，且屏幕阅读器对动态插入空格敏感。若项目需保 IE，改用 setTimeout 延迟赋值 + 强制 focus 是更稳妥的降级方案。
- 移动端 Safari 对
input事件触发时机有延迟，建议加compositionend事件兜底 - 空格不能作为
aria-label的一部分，需确保role="textbox"和aria-describedby指向说明文字 - 禁用
autocomplete="cc-number"以外的自动填充字段，避免 Chrome 自动补全带空格的旧卡号引发混乱
selectionStart 是否落在空格上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
