autocomplete属性必须使用w3c标准值（如street-address）、按语义顺序排列字段、确保https协议和dom初始渲染，且用户需在该域名下保存过地址才能触发浏览器自动填充。
autofill 不是 HTML 元素的属性，浏览器不识别 autofill ——你真正需要的是 autocomplete 属性，且必须用标准值（如 autocomplete="street-address"）才能触发地址自动填充。
为什么 autocomplete 值写错就完全不生效
浏览器只认 W3C 定义的特定字符串，大小写、连字符、空格全敏感。比如 autocomplete="address" 或 autocomplete="street" 都无效；必须用 autocomplete="street-address" 才能匹配街道行。
-
autocomplete="shipping street-address"是合法的（带作用域前缀），但autocomplete="shipping-street-address"会失效 - 中国用户常填的“省/市/区”需拆成三字段：
autocomplete="address-level1"（省）、autocomplete="address-level2"（市）、autocomplete="address-level3"（区） -
autocomplete="country"必须配<select></select>或<input type="text">，不能用type="hidden"—— 浏览器跳过隐藏字段
表单结构影响地址填充成功率
浏览器依赖字段顺序和语义完整性。单独一个 autocomplete="street-address" 很难被识别，必须配合周边字段形成逻辑块。
- 推荐按顺序排列：
autocomplete="organization"→autocomplete="street-address"→autocomplete="address-level2"→autocomplete="address-level1"→autocomplete="postal-code"→autocomplete="country" - 避免跨
<fieldset></fieldset>或插入无关字段（如中间加个<input autocomplete="off">会打断识别链） - 不要用 JavaScript 动态生成这些字段 —— Chrome 和 Safari 在 DOM 初始渲染后才扫描
autocomplete，动态插入的字段大概率被忽略
常见错误现象与调试方法
填完地址后右键点击输入框看不到「自动填充建议」？不是浏览器坏了，大概率是以下原因：
- 页面未通过 HTTPS 加载 —— Chrome 88+ 强制要求
autocomplete在安全上下文中才启用 - 字段被 CSS 隐藏（
display: none或visibility: hidden），即使值已存在，浏览器也认为不可交互而跳过 - 用户从未在该域名下保存过地址 —— 可手动在 Chrome 设置 → 「自动填充」→ 「地址」里添加一条测试数据，再刷新页面验证
- 控制台出现
[Autofill] Ignoring autocomplete value "xxx" on <input>警告，说明用了非标准值，打开 DevTools 的 Console 标签就能看到
地址自动填充不是“写了 autocomplete 就万事大吉”，它高度依赖字段命名准确性、DOM 结构稳定性、协议安全性，以及用户本地数据是否就位。最容易被忽略的是：哪怕所有代码都对，只要用户没在当前网站保存过地址，第一次永远不会弹出建议。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
