type="number"仅提供语义提示而非可靠输入控制，需配合min/max/step、javascript校验及input事件正则过滤，并优先使用inputmode属性适配移动端键盘。
用 type="number" 是最直接但不够可靠的方法
浏览器原生支持 type="number"，能唤起数字键盘、禁用非数字粘贴（部分浏览器），但**它不阻止用户手动输入字母或符号**——比如在 Chrome 中输入 e、+、-、. 仍可能通过验证，甚至允许空值或负号后无数字。它只是“提示语义”，不是输入拦截。
实操建议：
- 必须配合
min、max和step使用，例如<input type="number" min="0" step="1">可限制为非负整数 - 提交前仍需用 JavaScript 校验
input.valueAsNumber是否为有效数字（isNaN()判断） - 不要依赖它做唯一防线，尤其涉及金额、ID 等关键字段
监听 input 事件 + 正则过滤更可控
想真正“只让输数字”，得在用户输入时实时清理非法字符。重点不是阻止按键（会干扰 IME、快捷键），而是输入后立刻修正值。
常见错误现象：用 keydown 拦截 e、. 导致无法输入小数点；或未处理粘贴（paste 事件）导致绕过校验。
实操建议：
- 监听
input事件（覆盖输入、粘贴、拖拽等所有修改场景） - 用正则
/[^0-9]/g清除非数字字符，或更严谨地支持小数：/[^0-9.]/g+ 额外逻辑确保最多一个点 - 修正后要手动设置
input.value，并保留光标位置（否则频繁重置会导致输入卡顿）
input.addEventListener('input', () => {
const raw = input.value;
const cleaned = raw.replace(/[^0-9]/g, '');
if (cleaned !== raw) {
input.value = cleaned;
}
});
pattern 属性只对表单提交校验生效
pattern 是 HTML5 表单约束属性，例如 <input pattern="[0-9]*">，但它**仅在调用 form.reportValidity() 或用户点击提交按钮时触发**，完全不影响实时输入行为。
使用场景有限：
- 适合搭配
required做轻量级提交前检查 - 不适用于需要即时反馈的场景（比如输入框旁显示错误提示）
- 注意：正则默认是全文匹配，
[0-9]*允许空值；若需非空，改用[0-9]+
移动端数字键盘适配与兼容性陷阱
安卓和 iOS 对 type="number" 的键盘唤起行为不一致：iOS 通常显示带小数点和负号的键盘，安卓部分机型只显示纯数字键盘（无小数点）。如果业务需要小数输入，type="decimal" 在 iOS 上有效，但安卓不识别；而 inputmode="decimal" 是更现代的替代方案，兼容性更好（Chrome 82+、Safari 16.4+）。
实操建议：
- 优先用
inputmode="numeric"（整数）或inputmode="decimal"（小数），比type="number"更专注键盘控制 - 不要同时设
type="number"和inputmode，避免部分浏览器行为冲突 - 始终降级处理：当
inputmode不被支持时，回退到type="text"+ JS 过滤
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
