多数情况下是因干扰属性导致，如inputmode="text"、严格pattern、autocomplete="off"或过严maxlength；应仅保留type="tel"，避免干扰，android可加inputmode="numeric"兜底。
tel 输入框为什么没弹出数字键盘？
多数情况下，不是 <input type="tel"> 失效，而是它被其他属性或 CSS 干扰了。iOS 和 Android 对 type="tel" 的支持其实很稳定，但一旦加上 inputmode="text"、pattern 过于复杂、或用了 autocomplete="off"，就可能退化回全键盘。
实操建议：
- 只保留必要属性：
<input type="tel" id="phone">—— 不加pattern、不设inputmode、不用autocomplete="off" - 避免用
maxlength限制过严（如maxlength="11"），某些安卓机型会因此触发文本键盘 - 如果必须格式化（如加空格/横线），用 JavaScript 在
blur或change时处理，而非input实时拦截
Android 上 tel 键盘偶尔弹出字母键怎么办？
这是 Android Webview 的常见行为：即使 type="tel"，部分厂商（尤其旧版 Samsung、MIUI）仍默认显示带字母的“电话键盘”。这不是 bug，是系统级策略 —— 它允许用户输入分机号、#* 号等扩展字符。
能做的有限但有效：
- 加
inputmode="numeric"是目前最稳妥的兜底方案，它会强制弹出纯数字键盘（注意：iOS Safari 16.4+ 才支持，旧版忽略） - 避免使用
pattern="[0-9]*"—— 它在部分 Android 上反而触发正则校验式键盘（含字母） - 若业务强依赖纯数字输入，可配合
oninput="this.value = this.value.replace(/[^0-9]/g, '')"做即时清洗，但别阻断原生键盘行为
为什么加了 type="tel" 还要写 aria-label？
因为屏幕阅读器和部分输入法（如 Gboard 语音）依赖语义而非类型推断。type="tel" 本身不保证辅助技术识别为“电话号码”，尤其当页面结构扁平、无上下文时。
实操建议：
- 始终配
aria-label="请输入手机号"或aria-labelledby指向明确说明文字 - 不要只靠 placeholder 提示 —— 它在聚焦后消失，对无障碍无效
- 如果表单有 label，优先用
<label for="phone">手机号</label>，比 aria-label 更可靠
tel 类型在微信内置浏览器里表现异常
微信 iOS 客户端（尤其是 8.0.4x 版本）曾长期将 type="tel" 渲染为文本键盘，且无视 inputmode。这不是 HTML 标准问题，而是其 WebView 内核未完整实现表单类型映射。
应对思路：
- 检测 UA：用
navigator.userAgent.includes("MicroMessenger")判断是否微信，对 iOS 微信可降级为type="number"+inputmode="decimal"（虽不完美但数字键优先） - 不依赖
type="tel"做格式校验 —— 它只是提示，真正校验必须走 JS 正则或后端 - 微信中
tel:链接（如<a href="tel:13800138000"></a>）仍完全可用，别混淆输入框和拨号链接
真正麻烦的从来不是怎么写 type="tel"，而是不同 WebView 对同一标准的解释偏差——你得随时准备 fallback，而不是指望一个属性解决所有问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
