type="number" 无法阻止输入字母，因其仅控制默认行为和提交校验；需用 oninput + 正则 replace 实时过滤，如 oninput="this.value = this.value.replace(/1/g, '')"，并辅以 inputmode="numeric" 提升移动端体验。0-9 ↩
input type="number" 为什么还是能输字母？
因为 type="number 只控制浏览器默认行为和提交时校验，不阻止用户粘贴非数字内容或通过开发者工具绕过。实际测试中，onpaste、oninput 触发前，e.target.value 已含非法字符，单纯靠属性无法真正拦截。
关键不是“设成 number 类型”，而是“在输入过程中实时过滤”。必须配合 JavaScript 监听并修正值。
oninput + 正则 replace 是最稳的组合
用 oninput（而非 onchange）确保每次按键/粘贴都响应；正则 /[^0-9]/g 匹配所有非数字字符，replace 清除它们。注意：要保留空字符串允许清空，不能强制补 0。
-
oninput="this.value = this.value.replace(/[^0-9]/g, '')"—— 最简可用方案 - 若需支持小数点或负号，正则改为
/[^0-9.-]/g，但要额外处理多个小数点、开头多个负号等边界 - 移动端软键盘可能仍显示字母键，但输入后会被立即清除，体验无感
用 inputmode="numeric" 提升移动端体验
inputmode 是 HTML5 属性，告诉手机浏览器“预期输入数字”，会主动调出数字键盘。它不校验内容，但和 oninput 配合能减少误输。
- 加上
inputmode="numeric"和pattern="[0-9]*"（后者仅用于表单提交前提示） - 注意：iOS Safari 对
inputmode支持较好，Android Chrome 也已普遍支持，但旧版 WebView 可能忽略 - 不要依赖
pattern做实时限制——它只在checkValidity()或提交时触发
阻止粘贴时的非数字内容
用户右键粘贴或 Ctrl+V 时，oninput 通常仍会触发，但某些浏览器（如旧版 IE）可能先执行粘贴再触发事件，导致短暂出现非法字符。稳妥起见可加 onpaste 预处理：
onpaste="setTimeout(() => { this.value = this.value.replace(/[^0-9]/g, ''); }, 0)"
用 setTimeout 确保粘贴动作完成后再清理，避免被覆盖。现代浏览器中 oninput 已足够，但金融、表单类场景建议双保险。
真正的难点不在写几行代码，而在是否考虑了粘贴、拖拽文本、全选后删除再输入、屏幕阅读器兼容性这些边缘动作——漏掉任意一个，用户就可能卡在“明明输了数字却提交不了”的状态里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
