本文介绍如何使用原生 javascript 实时监听输入、过滤非数字字符、限制总长为16位，并按每4位自动插入空格，同步更新预览卡片，兼顾用户体验与表单校验。
本文介绍如何使用原生 javascript 实时监听输入、过滤非数字字符、限制总长为16位，并按每4位自动插入空格，同步更新预览卡片，兼顾用户体验与表单校验。
在构建支付类表单（如银行卡号输入）时，良好的输入体验至关重要：用户应能直观看到格式化的卡号（如 1234 5678 9012 3456），同时系统需确保仅接收合法数字、防止超长输入，并实时同步到视觉预览区。以下是一个轻量、可靠且无需第三方库的实现方案。
核心逻辑解析
关键在于三步处理：
- 清理输入：移除所有空格及非数字字符；
-
截断长度：只保留前16位数字（避免
maxlength="16"被空格干扰导致实际数字超限）； -
分组格式化：用正则
/.{1,4}/g将字符串每4位切片，再以空格拼接。
完整可运行代码示例
<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 #ccc;
padding: 10px;
margin-top: 20px;
font-family: 'Courier New', monospace;
}
.card-number {
font-size: 18px;
font-weight: bold;
letter-spacing: 2px;
}
const input = document.getElementById('cardInput');
const show = document.querySelector('.card-number');
input.addEventListener('input', () => {
// 1. 移除所有非数字字符（保留纯数字）
let digitsOnly = input.value.replace(/\D/g, '');
// 2. 严格限制为最多16位数字
digitsOnly = digitsOnly.slice(0, 16);
// 3. 每4位切分并用空格连接；若为空则显示占位符
const formatted = digitsOnly
? digitsOnly.match(/.{1,4}/g).join(' ')
: '•••• •••• •••• ••••';
show.textContent = formatted;
});
// 可选：阻止粘贴非数字内容
input.addEventListener('paste', (e) => {
e.preventDefault();
const paste = (e.clipboardData || window.clipboardData).getData('text');
const digits = paste.replace(/\D/g, '').slice(0, 16);
document.execCommand('insertText', false, digits);
});
注意事项与增强建议
- ✅
maxlength="19"设置为19而非16，是为了容纳最多3个空格（16数字 + 3空格 = 19字符），避免用户手动输入空格时被截断；真实校验仍以纯数字长度为准。 - ✅ 使用
\D（非数字）而非\s（仅空格）清除所有非法字符（如字母、符号、中文），提升健壮性。 - ⚠️ 若需兼容表单提交，应在后端再次校验——前端格式化仅为体验优化，不可替代服务端验证。
- ? 进阶可结合
inputmode="numeric"和pattern="[0-9\s]*"提升移动端数字键盘触发率与语义化。
该方案简洁高效，已在现代浏览器中充分验证，适用于信用卡、借记卡等四位分组场景，是兼顾可访问性、可维护性与用户体验的推荐实践。
