使用 type="tel" 并配合 inputmode="numeric" 和 pattern="[0-9]*" 是触发手机号专用数字键盘最兼容方案，需用 JS 实时过滤非数字字符并前后端双重校验格式。
在移动端网页中，使用 type="tel" 是让手机弹出数字键盘（或带符号的拨号键盘）最直接、兼容性最好的方式，但要注意它本身不校验手机号格式，只是触发输入法优化。要真正实现“手机号专用数字键盘”，需结合 HTML 属性与少量 JS 补充。
基础写法：正确声明 type 和 inputmode
仅写 type="tel" 在多数安卓和 iOS 系统上会触发数字/拨号键盘，但 iOS 有时仍显示完整键盘（尤其在某些浏览器或系统版本中）。更稳妥的做法是同时设置 inputmode：
<input type="tel" inputmode="numeric" pattern="[0-9]*">-
inputmode="numeric"明确告诉浏览器优先调用数字键盘（iOS Safari 16.4+、Chrome Android 等支持良好） -
pattern="[0-9]*"辅助部分浏览器（如旧版 Safari）进一步倾向数字键盘，且不影响提交逻辑
避免误触符号键：精简键盘布局
纯 type="tel" 可能唤起含 +-()#* 的拨号键盘，对手机号输入不够干净。可通过以下方式收敛：
- 去掉
pattern中的非数字字符（如不用[0-9\-\(\)\+]*），只留[0-9]* - 添加
maxlength="11"（国内手机号）限制长度，减少误输 - 配合 CSS
input { -webkit-text-security: none; }防止 iOS 自动加星号遮盖（仅当用type="password"时才需要，此处不适用）
增强体验：自动过滤非数字字符
用户仍可能粘贴字母或手动切换键盘输入符号，建议用 JS 实时清理：
- 监听
input事件，用正则/\D/g替换所有非数字字符 - 示例：
input.addEventListener('input', e => {<br> e.target.value = e.target.value.replace(/\D/g, '');<br>}); - 注意：不要用
keydown拦截，会干扰中文输入法等正常流程
补充验证：type="tel" 不等于手机号校验
type="tel" 完全不校验格式，提交前必须自行验证：
- 前端用正则判断是否为 11 位大陆手机号：
^1[3-9]\d{9}$ - 后端必须重复校验，不可信任前端任何输入
- 若需国际号码，应改用
type="tel"+ 国家代码选择器，而非强求纯数字键盘
