type="tel"仅提供语义和键盘提示，不校验格式、不阻止非法字符；pattern只在提交或调用reportValidity()时触发，需配title和required，且正则勿加^$；实时反馈须JS监听+手动校验；inputmode="numeric"比type="tel"更可靠唤起数字键盘。
type="tel" 不校验格式、不阻止非法字符、checkValidity() 恒为 true——它只是语义提示，别当验证用。
为什么 pattern 属性在表单提交前完全没反应
很多人加了 pattern="[0-9]{11}" 却发现用户随便输 “abc” 也能一路敲到底，blur 或 input 事件里也不报错。因为 pattern 是 HTML5 表单级校验机制，只在调用 form.submit()、点击原生 <input type="submit"> 或触发 reportValidity() 时才执行。
- 空值不走
pattern校验，只走required；非空乱码却照收 -
title属性必须写，否则 Chrome 不显示错误文案，Safari 显示但常被截断 - 正则不用写
^和$，浏览器默认全匹配；写成pattern="[0-9]{11}"就行，别写pattern="^[0-9]{11}$" - 若要实时反馈（比如输错立刻标红），得手动监听
input或blur，再调reportValidity()
inputmode="numeric" 才是真正唤起数字键盘的关键
type="tel" 在部分 Android 定制系统（如华为 EMUI、小米 MIUI）和微信 WebView 中几乎无效，仍弹全键盘。inputmode="numeric" 是 W3C 明确为软键盘设计的属性，优先级更高、行为更可控。
- iOS Safari 12.2+、Android Chrome 71+ 均支持，会稳定触发带
#、*的拨号键盘 - 别用
inputmode="tel"——主流浏览器直接忽略，写了等于白写 - 稳妥写法是共存：
<input type="tel" inputmode="numeric">，旧设备 fallback 到type="tel"，新设备响应inputmode -
inputmode="numeric"不影响无障碍语义，screen reader 仍靠type="tel"读作“电话号码”
JS 过滤非数字字符时，光标跳到末尾怎么修
在 input 事件里直接写 event.target.value = event.target.value.replace(/[^0-9]/g, '') 看似干净，但用户想在中间删一个字符，光标会瞬间跳到末尾，体验崩坏。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：先记录
selectionStart和selectionEnd，替换后再用setSelectionRange()恢复光标位置 - 别依赖
beforeinput——iOS Safari 不支持，兼容性太差 - 粘贴、长按删除、中文输入法下输数字都会打破简单正则逻辑，需单独处理
paste事件并做清洗 - 国内手机号别只卡 11 位，号段已扩展至
166、199、170等，建议用^1[3-9]\d{9}$，并预留国际号入口（如+86）
maxlength 在 Android 上经常失效怎么办
maxlength 在多数 Android 浏览器（尤其定制 WebView）中对 type="tel" 无效，用户仍可粘贴超长字符串。HTML 层面无法闭环，必须 JS 截断。
- 监听
input事件，在赋值前检查长度，超长则截取前N位 - 配合
pattern="[0-9]*"和maxlength="15"作为双保险，但不能只靠它们 - 注意：Safari 对
\d支持不一致，正则中务必用[0-9]而非\d，否则 Unicode 数字（如阿拉伯数字）可能不匹配 - 后端必须独立清洗和校验——前端任何限制都可绕过，国际号码（含
+、空格、括号）全靠服务端解析归一化
真正上线时，type="tel" 只是起点：键盘行为、粘贴逻辑、光标控制、号段更新、国际格式兼容——每个点漏掉一个，用户在真实场景中一试就崩。
