HTML5 仅提示性影响软键盘，不触发拨号；真正拨号需 tel: 协议链接；type="email" 校验宽松且微信 WebView 支持差，须结合 inputmode 与 JS 校验。
HTML5
浏览器对 type="tel" 的处理是「提示性」而非「强制性」：它只影响软键盘弹出逻辑（如 iOS 会显示数字键盘），但不会自动添加拨号链接或调起系统电话 App。真正触发拨号的是 tel: 协议的 链接，不是 。
常见错误现象：
– 在 iOS Safari 中点击 ，只弹出数字键盘，无法长按呼出拨号菜单
– Android Chrome 对 type="tel" 几乎无特殊响应，键盘仍是默认文本键盘
- 若需点击拨号，必须用
，且确保号码格式合法（如+8613800138000或13800138000，不含空格、横线、括号） -
建议配合inputmode="numeric"和pattern="[0-9]*"提升移动端体验 - 不要依赖
type="tel"做格式校验——它不阻止用户输入字母，pattern和 JS 校验仍不可少
type="email" 在表单提交时会触发浏览器内置邮箱格式检查（如是否含 @、是否有多余空格），但规则极宽松：它接受 user@domain（无后缀）、user@domain.（结尾点号）等明显非法值。
常见错误现象：
– 用户输入 name@domain（缺 TLD）仍能通过 HTML5 校验
– 某些旧版 Android WebView 完全忽略 type="email"，软键盘仍是文本键盘
立即学习“前端免费学习笔记（深入）”；
- 必须搭配
required才启用校验；仅写type="email"不会阻止空提交 - 若需严格校验，应使用
pattern（如pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$"）或 JScheckValidity()+ 自定义正则 - 注意：iOS Safari 对
type="email"会自动将首字母转小写，但部分安卓输入法不支持自动切换为 @ 键盘，可加inputmode="email"辅助
如何让邮箱输入框在 iOS 上优先显示 @ 键盘
iOS Safari 对 type="email" 的支持较稳定，但实际键盘行为还受 inputmode 控制。仅靠 type="email" 有时仍弹出默认键盘，尤其在第三方输入法下。
实操建议：
– 必须同时设置 type="email" 和 inputmode="email"
– 避免设置 autocomplete="off"，它可能干扰浏览器对输入类型的识别
-
inputmode="email"是关键：它明确告诉浏览器“用户要输邮箱”，比type更直接控制软键盘 -
autocomplete="email"不仅提升用户体验，还能增强浏览器对字段语义的理解，间接改善键盘匹配 - 不要用
autocapitalize="none"覆盖默认行为——iOS 邮箱输入本就不自动大写，覆盖反而可能引发异常
tel/email 输入在微信内置浏览器中的表现差异
微信 WebView（基于 X5 内核）对 HTML5 输入类型支持不一致：type="tel" 在多数版本中完全无效，软键盘始终是文本键盘；type="email" 则偶尔触发邮箱键盘，但校验逻辑常被跳过。
这意味着：依赖原生行为的交互在微信里大概率失效。
- 对电话场景，更可靠的做法是：用普通
+ JS 监听粘贴/输入，过滤非数字字符，并在按钮旁放一个隐藏的供用户手动点击 - 对邮箱场景，必须用 JS 做二次校验（如
/^[^\s@]+@[^\s@]+\.[^\s@]+$/），不能信checkValidity()的返回值 - 测试时务必真机运行——模拟器和 Chrome DevTools 的设备模式无法复现 X5 内核的真实行为
原生类型只是辅助，真实环境里，协议识别（tel:/mailto:）、软键盘控制（inputmode）、JS 校验三者缺一不可。
