autocomplete="tel"需与type="tel"组合且页面加载时即存在于DOM中才有效，动态插入、隐藏、无form包裹或非标准值均导致失效。
写 autocomplete="tel" 不等于电话号码就能自动填充——它只是语义标签，不是开关。真正起作用的是 autocomplete="tel" 和 type="tel" 的组合，且必须在页面加载时就存在于 DOM 中。
为什么写了 autocomplete="tel" 却没弹建议？
常见原因不是浏览器不支持，而是语义或时机没对上：
-
type不是"tel"：比如用type="text"+autocomplete="tel"，Chrome 可能降级处理，Safari 基本忽略 - 字段是 JS 动态插入的：比如
document.createElement('input')后再 append，旧版 Safari 会错过扫描时机 - 被
display: none或visibility: hidden隐藏过：哪怕后续 show 出来，Safari 仍跳过自动填充 - 表单没包在
<form>标签里，或action属性为空：浏览器认为无提交上下文，不激活智能填充
type="tel" 和 autocomplete="tel" 必须同时存在
二者协同才稳定触发，尤其在移动端：
-
type="tel"决定键盘类型（数字+符号布局），也强化语义可信度 -
autocomplete="tel"告诉浏览器“这是电话字段”，用于匹配已保存记录 - 实测中，
<input type="tel" autocomplete="tel">在 Chrome、Safari、Edge 上唤出手机号建议成功率最高 - 别写
autocomplete="telephone"或autocomplete="mobile"—— 这些不是 WHATWG 标准值，浏览器直接忽略
收货人/联系人电话要加 shipping 前缀
如果页面有多个电话字段（如账单电话、收货电话），光写 autocomplete="tel" 会导致浏览器随机填错：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 收货人电话用
autocomplete="shipping tel" - 账单电话用
autocomplete="billing tel" - 两者不能混用，否则 Chrome 可能把账单号塞进收货框，Safari 更倾向跳过填充
- 前缀必须紧贴关键词，中间空格不可省略，也不能写成
shipping-tel或shipping_tel
React/Vue 里容易踩的坑
框架的响应式机制常覆盖原生自动填充行为：
- React 中避免
value={phone} onChange={...}初始为""或undefined—— 某些 Chrome 版本会跳过填充；改用defaultValue更稳妥 - Vue 中别绑定
v-model="formData.phone"且初始值为空字符串；建议设为null或undefined，让浏览器先填再同步 - 别写
autocomplete={isLogin ? 'tel' : 'off'}—— 首次渲染必须是明确值，条件表达式会让 Safari 当作未声明 - SSR 渲染时，服务端 HTML 必须包含完整
autocomplete="tel"，客户端 JS 不能补
最隐蔽的问题往往不在属性本身，而在字段是否「一开始就在那里」——只要它晚于页面 load 事件出现，或者被框架延迟挂载，自动填充就大概率失效。这不是 bug，是浏览器对用户隐私和数据一致性的主动约束。
