inputmode="numeric"需搭配type="text"才稳定生效，ios旧版及国产安卓常忽略它；必须加pattern="[0-9]*"并用oninput实时过滤非法字符，真机测试不可替代。
inputmode="numeric" 为什么没弹数字键盘
写了 inputmode="numeric" 却还是弹出全键盘，不是语法错，而是被其他属性压制或环境不支持。iOS Safari 在 16.4 之前完全忽略它；国产安卓（vivo、华为、OPPO）的系统输入法普遍只认 type="tel" 或 type="number"，对 inputmode 视而不见。更常见的是：你配了 type="number"，结果 iOS 直接覆盖掉 inputmode，连提示都不发。
必须搭配 type="text" 才稳定生效
inputmode="numeric" 只在 type="text" 下最可控——避开 type="number" 的 spinner、粘贴拦截、小数点转逗号等副作用。真机测试中，type="text" + inputmode="numeric" 是验证码、商品数量、页码等纯整数场景下兼容性最好的组合。
- 别用
type="number"+inputmode="numeric"：iOS 会无视后者，Android 行为不一致 - 必须加
pattern="[0-9]*"：不然用户仍可粘贴字母，浏览器也不报错 - 中文输入法下它照样失效：用户切到拼音后，键盘立刻回归全字符，
inputmode不锁输入法
真机验证比写法更重要
Chrome DevTools 模拟器显示“数字键已出现”，不代表 vivo X100 或华为 Mate60 能看到。同一页面，在小米弹出带小数点的键盘，在 OPPO 上却弹出带 *# 的电话键盘，是常态。国产厂商系统键盘行为在不同版本间波动极大，尤其 EMUI 和 MIUI。
- 必测组合：
<input type="text" inputmode="numeric" pattern="[0-9]{4,6}"> - 长按粘贴 “abc123” 或 “+86 138****” 依然能进——
inputmode从不干预内容，只提示键盘布局 - 如果某机型始终 fallback 到全键盘，立刻降级为
type="tel"（仅限手机号），或放弃inputmode，改用 JS 弹出自定义面板
别指望它防错，JS 过滤才是关键
inputmode="numeric" 是软提示，不是校验器。用户仍可通过粘贴、开发者工具、JS 赋值等方式输入非法字符。真正要拦住非数字，得靠 oninput 实时过滤：
<input type="text" inputmode="numeric" pattern="[0-9]*" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
- pattern 只影响原生验证提示，不阻止输入
- oninput 比 onchange 更及时，能拦截粘贴和拖拽输入
- 别依赖 valueAsNumber：对
type="text"它返回NaN，始终用parseInt(value, 10)并判isNaN()
实际效果取决于你手里的那台手机正在运行什么系统、什么输入法——文档写得再全，也得拿真机点一下才知道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
