type="tel"的核心作用是提示浏览器调起拨号键盘而非校验号码；其在ios和android上表现不一致，因各平台对语义支持不同；真正限制数字输入需结合inputmode、js过滤与服务端校验。
input type="tel" 的核心作用不是“校验电话号码”，而是向浏览器声明：这个输入框预期接收一串由数字、符号（如 +、-、#、*）组成的自由格式字符串，移动端应优先调起拨号风格键盘。
为什么 type="tel" 在 iOS 和 Android 上表现不一致
iOS 会严格按语义调起带 * 和 # 的拨号键盘，但允许用户输入任意字符；Android 多数浏览器则把它当作“数字友好型文本框”，键盘布局紧凑、数字键突出，但不阻止字母或符号——它只是个提示，不是约束。
- 它不会自动过滤非数字字符，
value可能是"+86-138-1234-5678"，也可能是"abc" -
pattern="[0-9]*"对键盘类型无影响，只在表单提交时参与 HTML5 验证（且 Safari 对此支持不稳定） - 没有
maxlength生效保障：Android 下type="tel"常忽略该属性，必须用oninput或 JS 截断
inputmode 才是控制键盘类型的可靠方式
比起 type，inputmode 是 W3C 明确为“软键盘提示”设计的属性，兼容性更好（iOS 12.2+、Android Chrome 71+），且行为更可预测。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
inputmode="numeric"：纯数字键盘（0–9），无小数点、无负号，适合整数场景（如验证码、数量） -
inputmode="decimal"：带小数点的数字键盘，iOS/Android 均支持，适合金额、体重等 -
inputmode="tel"：等价于type="tel"，但更语义化；仍含*和#，不适合纯数字输入 - 不要混用
type="number"+inputmode="decimal"：部分安卓机型会冲突，优先选后者
如何真正限制只输数字并控制长度
靠 HTML 属性无法闭环。必须组合使用 inputmode + JavaScript 过滤 + 长度截断。
- HTML 写法：
<input inputmode="numeric" pattern="[0-9]*" oninput="this.value = this.value.replace(/\D/g, '').slice(0, 11)"> -
replace(/\D/g, '')比replace(/[^0-9]/g, '')更稳，能清除 Unicode 数字以外的所有字符（如全角数字、阿拉伯数字） - 避免用
keypress：中文输入法下无效，且现代浏览器已逐步弃用 - 注意 iOS Safari 的一个坑：首次聚焦时若
value为空，oninput不触发，需加onfocus清空逻辑兜底
最易被忽略的一点：即使键盘看起来是数字的，用户仍可通过粘贴绕过所有前端限制。真实业务中，服务端必须做二次校验，不能信任 inputmode 或任何客户端过滤逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
