关键在于整套地址字段的语义化组合与浏览器兼容性配合，需按顺序使用name、tel、address-line1等autocomplete属性，并配合type="text"、有效name及可见性，避免动态修改或父级关闭。
在 H5 页面中使用 autocomplete="street-address" 实现收货地址自动填充，关键不在于单个字段写对属性，而在于**整套地址字段的语义化组合与浏览器兼容性配合**。iOS Safari 和 Chrome（Android/iOS）对 autocomplete 的支持依赖于字段顺序、类型、name 属性及上下文关联，仅给一个输入框设 street-address 很难触发完整地址填充。
必须成组使用地址相关 autocomplete 属性
浏览器（尤其是 Safari）只在识别出“一整套地址结构”时才弹出地址建议。需按逻辑顺序组织以下字段（顺序很重要）：
-
<input autocomplete="name">（收件人姓名） -
<input autocomplete="tel">（手机号，部分系统会关联地址） -
<input autocomplete="organization">（可选，如公司名） -
<input autocomplete="address-line1">（对应 street-address，推荐优先用address-line1） -
<input autocomplete="address-line2">（如楼号、单元、楼层等补充信息） -
<input autocomplete="address-level2">（区/县，注意不是 city） -
<input autocomplete="address-level1">（省/直辖市） -
<input autocomplete="postal-code">（邮编）
⚠️ 注意：street-address 是旧规范值，iOS 15.4+ 及新版 Chrome 更推荐使用 address-line1；若仍用 street-address，需确保它出现在 address-line1 位置，否则可能被忽略。
input 类型和 name 属性要配合语义
仅靠 autocomplete 不够，浏览器还会参考 type 和 name 做二次判断：
- 地址行输入框用
type="text"（避免type="search"或type="number"等干扰识别） - 保留有意义的
name，例如name="address[line1]"或name="consignee_address"，避免纯数字或无意义 name（如name="a1"） - 不要用
display: none或visibility: hidden隐藏地址字段——Safari 会跳过不可见字段
避免常见破坏自动填充的行为
以下操作会直接导致地址自动填充失效：
- 用 JavaScript 动态清空或重写 input 的
value或autocomplete属性（尤其在 focus/blur 时） - 表单包裹在
<form autocomplete="off"></form>中（父级关闭会覆盖子项） - 地址字段被 Vue/React 等框架通过 v-model / value + onChange 完全接管，且未同步原生属性变化
- 页面加载后延迟渲染地址表单（如 tab 切换后才显示），Safari 可能未将其纳入初始地址域识别
真机测试要点（不能只看模拟器）
自动填充行为高度依赖系统地址簿数据和浏览器版本：
- iOS：进入「设置 → 邮件 → 姓名与地址」确认已填写完整收货地址，并开启「自动填充联系人」
- Android Chrome：检查「设置 → 自动填充 → 地址」是否启用，且至少保存一条有效地址
- 测试时用真实键盘唤起（非点击 placeholder），焦点落在
address-line1字段后长按输入框，看是否出现「粘贴地址」或「自动填充」选项 - 若只弹姓名/电话，说明地址结构未被识别——回头检查字段顺序、autocomplete 值拼写、是否被隐藏或动态修改
