<input type="number"> 无法确保纯数字输入，因允许科学计数符且无法拦截粘贴等操作；应结合 oninput + 正则实时过滤、onpaste 处理粘贴内容，并始终后端校验。
input type="number" 为什么不能直接用
因为 type="number 只控制输入控件的 UI 行为（比如唤起数字键盘、显示上下箭头），但无法阻止用户粘贴非数字内容或通过开发者工具绕过。更关键的是，它允许输入 e、+、-、. 等字符——这些在科学计数法里合法，但在纯整数场景下就是脏数据。
oninput + 正则替换是最稳的实时拦截方案
监听 oninput（不是 onchange，后者不触发粘贴/拖入等操作），用正则把非法字符当场清掉。注意两点：一是保留空字符串允许清空，二是别用 onkeypress，它对粘贴无效且在部分浏览器中被禁用。
常见错误现象：value.replace(/\D/g, '') 会干掉负号和小数点，导致 -12.5 变成 125；而 parseFloat() 又可能把 12abc 转成 12，掩盖了用户误输。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只允许整数：
input.value = input.value.replace(/[^0-9]/g, '') - 允许带符号和一位小数点（如金额）：
input.value = input.value.replace(/[^0-9.-]/g, '').replace(/(\..*)\./g, '$1').replace(/^([^.]*\..*)\./, '$1').replace(/^(-?)(.*)-/, '$1$2')（更稳妥的做法是分步校验，见下一条） - 推荐组合写法：先用正则粗筛，再用
Number()或parseFloat()验证是否为有效数字，无效则回退上一次合法值
需要防粘贴？得单独监听 paste 事件
oninput 不捕获粘贴行为的初始输入，必须额外绑定 onpaste 并在 event.preventDefault() 后手动处理剪贴板内容。
使用场景：用户右键粘贴 abc123def 或 Excel 多列数据。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
onpaste回调里调用event.clipboardData.getData('text') - 对获取到的字符串做同样正则清洗，再
insertData或直接赋值给input.value - 注意 Safari 对
clipboardData的兼容性，可降级为execCommand('insertText', false, cleaned)（已废弃但仍有用）
后端永远要重复校验，前端只是体验层
所有前端限制都可被禁用或绕过。比如用户关掉 JS、用 curl 直接 POST、或改 DOM 属性。
性能影响：正则替换本身极快，但高频触发（如长按输入）可能卡顿，建议加 requestAnimationFrame 节流；兼容性无问题，oninput 和 onpaste 在 IE9+ 均支持。
容易被忽略的地方：表单重置（form.reset()）会清空 JS 维护的“上一次合法值”，如果用了回退逻辑，需同时监听 reset 事件重置缓存。
