银行卡号输入自动分组加空格的核心是监听input事件、正则清洗数字、动态插入空格并精准控制光标位置，需处理删除、粘贴及移动端兼容性问题。
银行卡号输入时自动每四位加空格，核心是监听输入、格式化值、防止光标跳动。关键在用 input 事件 + 正则清理 + 光标位置控制。
基础实现：监听 input 并格式化
使用原生 JavaScript 监听 input 事件，每次输入后提取纯数字，再按每四位插入空格：
- 先用
replace(/\D/g, '')去掉所有非数字字符（包括已有空格、横线等） - 再用正则
.replace(/(\d{4})(?=\d)/g, '$1 ')匹配每四个数字后仍有数字的位置，插入空格 - 最后赋值回
input.value
避免光标乱跳：必须保存并恢复光标位置
直接改 value 会导致光标跳到末尾。需在修改前记录光标位置，再根据新字符串计算对应位置并重设：
- 用
input.selectionStart获取当前光标索引 - 根据旧值和新值的字符差异（如新增空格数），推算光标应落在新字符串的哪个位置
- 修改完 value 后，用
setSelectionRange(newPos, newPos)把光标放回合理位置
增强体验：支持删除、粘贴与兼容性处理
用户可能删中间、粘贴带空格/符号的卡号，需特别处理：
- 对
delete和backspace键，要判断是否删的是空格——若是，应连同前一位数字一起删，保持四四分组逻辑 - 粘贴时用
paste事件拦截，event.preventDefault()后取clipboardData.getData('text')，清洗再格式化 - 移动端需注意 iOS Safari 对
input事件触发时机的差异，可补充keydown做兜底
简洁可用的代码示例（含光标修复）
以下为可直接使用的轻量实现（无依赖）：
<input type="text" id="cardInput" maxlength="19" placeholder="请输入银行卡号"><p><script>
const input = document.getElementById('cardInput');
input.addEventListener('input', formatCardNumber);</script></p><p>function formatCardNumber(e) {
const { value, selectionStart, selectionEnd } = e.target;
const digitsOnly = value.replace(/\D/g, '');
let formatted = '';</p><p>for (let i = 0; i 0 && i % 4 === 0) formatted += ' ';
formatted += digitsOnly[i];
}</p><p>// 计算光标偏移：原位置有多少个空格被插入或删除
const oldWithoutSpaces = value.replace(/\s/g, '');
const newLength = formatted.length;
const oldLength = value.length;
const cursorOffset = selectionStart - (oldLength - oldWithoutSpaces.length);</p><p>e.target.value = formatted;</p><p>// 恢复光标（简单策略：映射到最近的数字位）
const newCursor = Math.min(
Math.max(0, Math.floor(cursorOffset / 4) * 5 + (cursorOffset % 4)),
newLength
);
e.target.setSelectionRange(newCursor, newCursor);
}
</p>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
