应使用 type="text" inputmode="numeric" 组合，而非 type="number"，因后者在 iOS 弹出含小数点和 e 的键盘、自动过滤字符、空值转 0；再配合 pattern="[0-9]*"、maxlength 和规范 placeholder 提升数字键盘触发一致性。
inputmode="numeric" 为什么有时弹出带字母的键盘？
因为 inputmode="numeric" 只是提示浏览器“我期望数字输入”，但不强制；实际键盘类型由操作系统、浏览器实现和 type 属性共同决定。iOS Safari 对 inputmode 支持较弱，常忽略它，转而看 type；Android Chrome 虽支持，但若 type="text"，仍可能弹出全键盘。
必须搭配 type="text" 还是 type="number"？
选 type="text" —— 这是关键前提。虽然直觉上 type="number" 更“数字”，但它会带来副作用：
-
type="number"在 iOS 上强制唤起带「.」和「e」的科学计算器式键盘，且无法禁用小数点 - 会自动过滤非数字字符（如粘贴含空格的字符串时被截断），干扰用户编辑
- 提交时值为 number 类型，空值变
0，需额外处理 - 部分 Android 浏览器对
type="number"的inputmode忽略
所以正确组合是：type="text" inputmode="numeric"，再配合 pattern="[0-9]*" 和 enterkeyhint="done" 强化意图。
如何进一步收窄键盘范围（比如只显示 0–9）？
纯 HTML 无绝对方案，但可叠加三层约束提升一致性：
立即学习“前端免费学习笔记（深入）”；
- 加
pattern="[0-9]*"：告诉移动端“只接受数字”，部分 Android 键盘会据此简化布局 - 加
inputmode="decimal"不行——它反而引入小数点；坚持用inputmode="numeric" - 避免
min/max或step：这些属性在type="text"下无效，但在type="number"下会触发额外 UI，干扰键盘 - JS 辅助拦截：监听
input事件，用event.target.value = event.target.value.replace(/[^0-9]/g, '')实时清理，防止粘贴或长按输入法混入符号
iOS 上仍弹出带符号的键盘？试试这个 trick
iOS WebKit 对 inputmode 响应滞后，尤其在微信内置浏览器或旧版 Safari 中。一个被验证有效的绕过方式是：
- 设置
inputmode="numeric"+type="text"+pattern="[0-9]*" - **额外加上
maxlength="12"（或合理位数）**：iOS 检测到长度限制后，更倾向启用紧凑数字键盘 - 避免任何 placeholder 含非数字字符（如 “请输入手机号” 没问题，“请输入 11 位号码” 中的空格可能干扰）
- 不要用
autocorrect="off"或spellcheck="false"：它们对键盘类型无影响，反而增加冗余属性
最干净的数字键盘永远依赖组合策略，而不是单个属性——inputmode 是信号，不是开关。真要 100% 纯净，目前只有原生 App 能做到；Web 层能做的，是把信号发得足够明确、足够一致。
