合法 autocomplete 值包括 shipping address-level2（收货城市）、address-level2（默认账单城市）等标准 token；shipping locality 无效，浏览器忽略。
HTML5 的 autocomplete 属性本身不支持 "shipping locality" 这个值，它属于无效的自动填充 token，浏览器不会识别，也不会触发城市信息的自动填充。
哪些 autocomplete 值是合法且有效的？
根据 WHATWG HTML 标准，autocomplete 必须使用预定义的、标准化的 token。与“收货城市”最接近的合法值是：
-
shipping address-level2—— 表示地址的第二级行政区域（在中国通常对应城市，如“北京市”“杭州市”） -
shipping locality❌ —— 不是标准值，被忽略（部分旧文档或误传中出现，但未被任何主流浏览器实现） -
address-level2—— 无前缀时默认为 billing（账单地址），非 shipping
正确写法：用 shipping address-level2
要让浏览器在用户选择“收货地址”自动填充时填入城市，请确保：
- 该
<input>是 shipping 地址表单的一部分（建议用form或fieldset明确上下文） - 输入框类型为
text（城市一般不用tel或email） - 设置
autocomplete="shipping address-level2"
示例：
立即学习“前端免费学习笔记（深入）”；
<form autocomplete="on"><label>收货城市</label>
<input type="text" name="shipping_city" autocomplete="shipping address-level2">
<!-- 其他 shipping 字段，如 street-address, address-level1 等 -->
</form>
为什么有时不生效？常见原因
即使写了正确的 token，自动填充也可能失败，注意以下几点：
-
浏览器支持差异：Chrome、Edge、Safari（较新版本）支持
shipping *，Firefox 目前仅支持billing *（截至 2024） - 地址数据需完整录入：用户必须在浏览器设置中保存了带“城市”字段的 shipping 地址（例如 Chrome 的“支付方式 > 地址”中添加并标记为 shipping）
-
表单结构影响识别：建议将 shipping 字段集中放在一个
<fieldset>内，并加上name="shipping"或注释说明；避免和 billing 字段混排 -
同页面存在冲突 autocomplete：比如同时出现
billing address-level2和shipping address-level2，浏览器可能优先匹配 billing
补充建议：提升兼容性
如果目标用户大量使用 Firefox 或需要降级保障：
- 保留
autocomplete="shipping address-level2"作为主方案 - 同时提供下拉城市选择器（如基于高德/腾讯地图 API 的搜索组件），作为 fallback
- 不要依赖 autocomplete 完全替代用户输入——始终服务端校验城市合法性
