type="number" 不阻止非数字输入，仅提供语义和基础校验；需用 input 事件+正则清洗实现纯数字显示，配合 inputmode 唤起数字键盘，且后端必须严格校验。
type="number" 本身不阻止非数字输入
浏览器允许在 input type="number" 中输入 e、+、-、.，甚至粘贴 "12abc" 或 "..5"。这些内容不会被实时拦截，只有在表单提交时才触发校验，且 value 属性始终是字符串（如 "12abc"），valueAsNumber 则直接返回 NaN。这不是 bug，而是规范行为——它只提供语义和基础验证，不是过滤器。
真正限制纯数字输入得靠 input + 正则清理
若业务要求输入框里「只能显示数字字符」（比如手机号、ID），必须监听 input 事件并主动清洗值：
input.addEventListener('input', e => {
e.target.value = e.target.value.replace(/[^0-9]/g, '');
});
- 不要用
keydown：无法处理粘贴、拖拽、语音输入，还会干扰Ctrl+V - 避免光标跳动：该写法会重置光标到末尾；如需保留位置，得用
setSelectionRange配合记录 - 注意兼容性：iOS Safari 对
input事件触发时机有延迟，建议加防抖或同步校验
min/max/step 不是“开关”，而是校验上下文
min、max、step 只在值能被解析为有效数字时才起作用。它们不阻止输入，只影响 validity.valid 和 valueAsNumber 的结果：
- 不设
step→ 默认为1，输入3.14会被视为非法（validity.badInput === true） -
step="0.01"→1.001合法，但1.0001不合法 -
min="0"对空值、"-5"、"abc"都无约束力——这些情况下valueAsNumber是NaN，但value仍保留原字符串
移动端数字键盘不弹出？关键在 inputmode
仅靠 type="number" 在 iOS 和部分安卓 WebView 中大概率失效。必须加 inputmode="numeric"（整数）或 inputmode="decimal"（小数）才能稳定唤起带对应符号的软键盘：
- 别混用
pattern和inputmode：比如pattern="[0-9]*"+inputmode="decimal"可能导致 iOS 键盘退化为默认键盘 - 测试真实设备：Chrome Android 表现较稳；iOS 16+ 支持良好，旧版 iOS 建议降级为
type="text"+inputmode+ JS 校验 -
type="tel"是伪方案：虽能弹数字键盘，但语义错误、校验逻辑混乱，不推荐
最易被忽略的一点：所有前端限制都可被绕过。无论你怎么清理 input、怎么设 min/max、怎么唤起数字键盘，后端收到的仍是原始字符串，且可能为空、超长、含非法字符。服务端必须做类型转换（parseFloat 或 Number）、范围检查、精度截断，并拒绝非数字字段——这才是最后一道防线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
