银行卡号输入不能用type="number"，因其会截断开头0、允许负号/小数点、触发不兼容数字键盘；应改用type="text"+JS实时过滤非数字字符、限制长度并处理粘贴与空格分组。
银行卡号输入为什么不能用 type="number"
因为 type="number" 会触发浏览器原生数字键盘（移动端）、允许输入负号和小数点，还可能自动截断开头的 0——而银行卡号是纯数字字符串，且首位可能是 0（如部分预付卡），必须保留全部字符。直接用它，用户输完发现少了位数或多了符号，体验直接崩。
正确做法是用 type="text"，再靠 JavaScript 控制输入行为：
- 拦截非数字按键（如字母、空格、中文）
- 限制最大长度（通常 16–19 位，按发卡行规范）
- 允许退格、删除、方向键、粘贴等基础操作
如何用 input 的 oninput + onkeydown 做实时过滤
oninput 捕获所有输入变化（包括粘贴、拖入、语音输入），onkeydown 拦截按键意图（比如阻止 e.key === 'e' 或 '-'）。两者配合才稳。
示例逻辑（不依赖框架）：
立即学习“前端免费学习笔记（深入）”；
<input type="text" id="cardInput" maxlength="19" placeholder="请输入银行卡号">
<script>
const input = document.getElementById('cardInput');
input.addEventListener('keydown', (e) => {
if (!/[0-9]/.test(e.key) && !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(e.key)) {
e.preventDefault();
}
});
input.addEventListener('input', () => {
input.value = input.value.replace(/\D/g, '').slice(0, 19);
});
</script>注意：maxlength="19" 是 HTML 层兜底，但不能只靠它——用户粘贴含空格/分隔符的卡号时，maxlength 不生效，必须靠 JS 清洗。
粘贴时怎么避免格式混乱（如带空格、连字符）
用户常从短信、邮件复制带空格或 - 的卡号（如 "6228 4801 2345 6789 012"），直接 replace(/\D/g, '') 就能解决，但得确保在粘贴后立即执行，而不是等用户手动触发。
关键点：
- 监听
paste事件，调用e.preventDefault()阻止默认粘贴 - 用
e.clipboardData.getData('text')拿原始内容，清洗后再插入 - 插入后要手动恢复光标位置（否则光标会跳到末尾）
简版实现（接上段脚本）：
input.addEventListener('paste', (e) => {
e.preventDefault();
const text = e.clipboardData.getData('text').replace(/\D/g, '');
const cleaned = text.slice(0, 19 - input.value.length);
const start = input.selectionStart;
input.value = input.value.slice(0, start) + cleaned + input.value.slice(input.selectionStart);
input.setSelectionRange(start + cleaned.length, start + cleaned.length);
});要不要加空格分组？分组后怎么保证提交值仍是纯数字
视觉分组（如每 4 位加空格）能提升可读性，但必须和「提交值」解耦——表单提交、后端校验、前端正则匹配，全都要用无空格的纯数字串。
做法是：显示层用 span 或伪元素模拟分组，真实 <input> 值保持干净；或者用两个字段（一个隐藏存纯数字，一个可见做美化），但增加复杂度。
更轻量的做法是仅在失去焦点（blur）时格式化显示，聚焦时还原为纯数字：
input.addEventListener('blur', () => {
const num = input.value.replace(/\D/g, '');
input.value = num.replace(/(\d{4})(?=\d)/g, '$1 ');
});
input.addEventListener('focus', () => {
input.value = input.value.replace(/\s/g, '');
});这个方案简单，但要注意：如果用户在输入中途切换 Tab，blur 触发后加了空格，再 focus 又删掉，体验略顿。高频输入场景建议放弃分组，交给用户自己判断，或用独立的格式化组件处理。
真正容易被忽略的是：银行接口对卡号长度和前缀有强校验（比如 Visa 必须 13–16 位且以 4 开头），前端限制只是防错，不能替代后端 Luhn 算法校验和 BIN 号识别。
