type="tel"在iOS弹带*#的电话键盘，禁字母和小数点；Android行为宽松，可能允许汉字空格；type="number"易输错小数点、丢前导零，故手机号应选type="tel"并配合inputmode="numeric"、pattern和JS校验。
type="tel"在iOS和Android上到底弹什么键盘
type="tel" 确实会触发数字倾向的键盘，但具体长什么样、能输什么，得看系统和浏览器——不是统一的「纯数字小键盘」。
iOS 上它弹的是带 * 和 # 的电话键盘，**没有小数点、不支持字母输入**，布局紧凑，适合手机号；Android 上多数浏览器（如 Chrome）也弹数字键盘，但部分机型或 WebView 允许输入汉字、空格甚至符号，行为更宽松。
所以别以为写了 type="tel" 就万事大吉：它只承诺“语义是电话”，不承诺“只能输数字”。真要防字母，得靠 JS 或 pattern 配合校验。
为什么不用type="number"来输手机号
type="number" 在移动端反而容易翻车：iOS 会弹出带小数点和负号的键盘（哪怕你设了 step="1"），用户一不小心就输进 138.1234.5678；Android 更混乱，有些版本弹全键盘，有些弹简略数字键盘，还可能自动把 0123 解析成 123（去掉前导零）。
更麻烦的是，type="number" 会激活浏览器默认的上下微调按钮（尤其在桌面端），且 valueAsNumber 在动态改 type 时会失效——这跟电话号码需要保留前导零（如 021-12345678）的需求直接冲突。
所以手机号、固话、分机号这类含符号或需保留格式的字段，type="tel" 是更安全的起点。
怎么让type="tel"真正只收数字
仅靠 type="tel" 不够，得加几层防护：
-
pattern="[0-9*#+\s]{5,20}"：表单提交时触发原生校验提示，长度和字符范围可控（注意反斜杠要双写） -
inputmode="numeric"：现代 iOS/Android 都支持，比type更直接地指定键盘类型，且不会带来type="number"的副作用 - JS 实时拦截：
keydown中用正则过滤非目标键（如/^[0-9*#+\s]$/），同时放行Backspace、Delete、方向键 - 禁用粘贴：
paste事件里e.preventDefault()，或监听后用replace(/[^0-9*#+\s]/g, '')清洗剪贴板内容
inputmode="numeric"和type="tel"能一起用吗
能，而且推荐。这是目前最稳的组合：
inputmode="numeric" 是告诉浏览器“我要输纯数字”，iOS 12.2+ 和 Android Chrome 71+ 均可靠生效；type="tel" 则保留语义、可访问性（屏幕阅读器识别为电话字段）和基础软键盘适配。两者不冲突，inputmode 优先级更高。
注意：inputmode 不改变输入值类型，拿到的仍是字符串，后续仍需 parseInt() 或正则校验范围；另外，外接蓝牙键盘、远程桌面等场景无法被 inputmode 约束，必须靠 JS 补位。
真正难的不是弹出哪个键盘，而是让用户「想输错都难」——键盘只是第一道门，后面每一步都得设防。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
