input type="tel" 不一定弹出数字键盘，因浏览器仅将其视为语义提示；需配合 inputmode="numeric" 才能可靠触发拨号键盘，并辅以 pattern="[0-9]*" 和 maxlength="15" 等约束防错。
为什么 input type="tel" 不一定弹出数字键盘？
直接写 <input type="tel"> 在 iOS Safari 上大概率弹出的是带字母的全键盘，不是你想要的纯数字键盘——因为浏览器只把 type="tel" 当作语义提示，不强制限制输入法。Android 表现更混乱：部分 WebView（比如微信内置浏览器）会忽略 type="tel"，直接走默认键盘。
必须加 inputmode="numeric" 才能稳住数字键盘
inputmode 是比 type 更直接的输入法控制属性，它告诉浏览器“用户接下来要输什么”，优先级更高。对电话号码场景，inputmode="numeric" 是目前最可靠的选择：
- iOS Safari 16.4+ 和 Chrome/Edge 最新版都支持，会触发带「#」「*」和数字的拨号键盘
- 即使
type="tel"被降级或忽略，inputmode仍生效 - 不要用
inputmode="tel"—— 它在多数浏览器里等同于text，毫无作用
正确写法：<input type="tel" inputmode="numeric" pattern="[0-9]*">
pattern 和 maxlength 是防错关键，不是可选项
光靠 inputmode 只能影响键盘类型，拦不住用户粘贴字母或长串乱码。移动端用户习惯复制粘贴，必须主动约束：
-
pattern="[0-9]*"配合type="tel"，让表单校验时拒绝非数字内容（注意：不阻止输入，只影响checkValidity()和提交） -
maxlength="15"（国际号码上限）防止超长输入，避免 iOS 键盘因字段过长自动切到全键盘 - 别依赖
oninput实时过滤——某些 Android 键盘在输入中途会触发多次事件，导致光标跳位
兼容老系统得 fallback 到 type="text" + inputmode
iOS 12–15.6 和部分国产安卓 WebView 对 inputmode 支持不全。如果目标用户含大量旧设备，保险做法是：
- 保留
type="tel"作为基础语义 - 加上
inputmode="numeric"吃新特性 - 再补
autocomplete="tel"和name="tel"，帮密码管理器识别字段 - 完全放弃
type="number"—— 它会插入千分位逗号、禁止「+」开头，根本没法输国际号码
最终推荐模板：<input type="tel" inputmode="numeric" pattern="[0-9]*" maxlength="15" autocomplete="tel" name="tel">
真正容易被忽略的，是 pattern 的正则必须用 [0-9]* 而不是 \d* —— 后者在 Safari 中不匹配 Unicode 数字，会导致校验失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
