本文介绍如何使用原生 javascript 和正则表达式，对表单输入框进行实时格式化：仅接受数字、限制总长16位，并自动在每4位后插入空格，同步更新预览卡片上的卡号显示。
本文介绍如何使用原生 javascript 和正则表达式，对表单输入框进行实时格式化：仅接受数字、限制总长16位，并自动在每4位后插入空格，同步更新预览卡片上的卡号显示。
要实现符合真实银行卡样式（如 1234 5678 9012 3456）的输入体验，关键在于实时响应、严格过滤、智能分组。以下是一个轻量、可靠且无依赖的实现方案：
✅ 核心逻辑解析
- 使用
input事件监听用户输入（比keyup更全面，覆盖粘贴、拖入等操作）； - 立即清除所有空格（
replace(/\s/g, '')），避免格式干扰； - 用正则
/.{1,4}/g将纯数字字符串按每1–4个字符切片，再用' '.join()拼接为带空格的分组； - 同时需限制输入长度：HTML 属性
maxlength="16"仅限制可见字符（含空格），因此必须在 JS 中额外校验纯数字长度 ≤ 16。
? 完整可运行代码
<input type="text" id="cardInput" placeholder="Enter Card Number" maxlength="19"><div class="card-preview"> <div class="card-number">•••• •••• •••• ••••</div> </div>
.card-preview {
width: 250px;
border: 1px solid #ddd;
padding: 12px;
margin-top: 16px;
background-color: #f9f9f9;
border-radius: 4px;
}
.card-number {
font-family: 'Courier New', monospace;
font-size: 18px;
font-weight: bold;
letter-spacing: 2px;
color: #333;
}
const input = document.getElementById('cardInput');
const show = document.querySelector('.card-number');
input.addEventListener('input', () => {
// 1. 移除所有非数字字符（保留纯数字）
let digitsOnly = input.value.replace(/\D/g, '');
// 2. 截断至最多16位（防止粘贴超长）
if (digitsOnly.length > 16) {
digitsOnly = digitsOnly.slice(0, 16);
}
// 3. 每4位分组，用空格连接
const formatted = digitsOnly.match(/.{1,4}/g)?.join(' ') || '';
// 4. 同步更新显示与输入框值（可选：保持格式化后值回填）
show.textContent = formatted;
input.value = formatted; // ✅ 回填格式化结果，提升用户体验
});
⚠ 注意事项与增强建议
-
不要仅依赖
maxlength="16"：因空格会占用长度，建议设为maxlength="19"（16位 + 3个空格），并由 JS 主导长度控制； -
粘贴兼容性：上述代码通过
/D/g过滤所有非数字字符，天然支持粘贴（如"1234-5678-9012-3456"或"1234567890123456"）； -
移动端优化：可添加
inputmode="numeric"和pattern="[0-9]*"提升软键盘体验； -
无障碍支持：为
添加aria-label="Card number, 16 digits, grouped in sets of four"； -
防误操作：若需禁止光标跳转异常，可进一步封装
setSelectionRange，但本例中回填input.value = formatted已足够稳定。
该方案简洁高效，无需第三方库，适用于现代浏览器（Chrome/Firefox/Safari/Edge ≥ v100），是构建支付类表单的专业级基础实践。
