tel输入框未弹出纯数字键盘是因为ios safari将type="tel"语义理解为拨号场景，需添加inputmode="numeric"强制触发纯数字键盘，并配合pattern="[0-9]*"约束输入。
tel 输入框为什么没弹出数字键盘
直接写 <input type="tel"> 在多数安卓浏览器里确实会触发数字键盘，但 iOS Safari 默认弹出的是带符号的电话键盘（含 *#），不是纯数字键盘。这不是 bug，而是系统对 type="tel 的语义理解——它优先适配拨号场景，而非数字输入场景。
用 inputmode="numeric" 强制唤起纯数字键盘
inputmode 是现代浏览器支持的属性，明确告诉浏览器“用户接下来要输什么”，比 type 更细粒度控制软键盘类型。对纯数字输入，必须加这个：
<input type="tel" inputmode="numeric" pattern="[0-9]*">
-
inputmode="numeric"在 iOS 12.2+ 和大多数安卓浏览器中强制弹出无符号数字键盘 -
pattern="[0-9]*"配合inputmode进一步约束输入内容，避免用户粘贴非数字字符（注意：pattern 不会自动阻止输入，仅用于验证和部分键盘提示） - 不要用
type="number"替代——它会触发增减按钮、允许科学计数法输入，且在 iOS 上可能带小数点键
兼容性兜底与常见失效原因
如果加了 inputmode 仍不生效，大概率是以下原因：
- 页面未声明
，导致 iOS Safari 降级到怪异模式，忽略新属性 - 父容器或自身设置了
user-select: none或-webkit-user-modify: read-only，阻断焦点获取 - 用了第三方 UI 库（如某些 Vue 组件）封装了
<input>，但没透传inputmode属性 - 在微信内置浏览器（iOS）中，
inputmode支持不稳定，可额外加inputmode="decimal"作为 fallback（它在微信里反而更可靠）
要不要加 autocomplete="tel"
加 autocomplete="tel" 对键盘类型没影响，但它会影响自动填充行为：
- 在支持自动填充的浏览器（如 Chrome on Android）中，能唤出联系人电话建议
- 与
type="tel"搭配是语义最佳实践，但不会让键盘变数字键 - 如果业务场景是验证码或金额输入，别用
autocomplete="tel"，否则可能填错——改用autocomplete="one-time-code"或autocomplete="off"
真正决定键盘类型的只有 type + inputmode，其他属性都是辅助。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
