autocomplete值必须严格遵循WHATWG规范，否则跨国场景下自动填充失效；需用标准token、ISO国家码、结构化拆分地址、合法前缀且DOM连续，字段须初始存在并成功提交过。
autocomplete 值必须严格匹配 WHATWG 规范，否则跨国场景下全失效
浏览器自动填充不是“写个大概意思就行”，尤其在跨国表单中，autocomplete 值错一个连字符、大小写或语义层级，Chrome/Safari 就直接跳过该字段。比如：address-level1（省）不能写成 province 或 state；address-level2（市）不是 city；postal-code 不是 zip 或 postcode。
常见跨国踩坑点：
-
country必须用<select>或<input type="text">配合，且值要是 ISO 3166-1 alpha-2 标准码（如"CN"、"US"），填中文“中国”或“USA”无效 - 日本地址需拆出
address-level1（都道府県）、address-level2（市区町村），不能合并为单字段 - 德国邮编
postal-code字段常被填成 5 位纯数字，但实际格式含空格（如"10115"或"D-10115"），浏览器只认用户真实保存过的格式，无法强制统一 - 加拿大邮编含字母+数字+空格（如
"K1A 0A6"），type="number"会破坏输入，必须用type="text"
多地址块（shipping/billing）必须加前缀，且仅限四个合法值
当表单同时出现收货地址和账单地址时，不能靠 class 名或 name 属性区分，浏览器只认 autocomplete 前缀。合法前缀只有四个：shipping、billing、home、work。其他如 delivery、invoice、personal 全部被忽略。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
<input type="text" autocomplete="shipping street-address"> <input type="text" autocomplete="shipping address-level2"> <input type="text" autocomplete="billing street-address"> <input type="text" autocomplete="billing postal-code">
关键规则：
- 前缀和主 token 之间用单个空格分隔，不能用下划线或连字符
- 同一前缀下的字段必须连续出现在 DOM 中（中间不能插非地址字段），否则浏览器视为断开
- 如果只有一套地址，别加前缀——
shipping street-address在单地址场景下反而可能被跳过 -
billing country和shipping country可共存，但必须各自配<select>，不能复用同一个下拉框
地址字段必须结构化拆分，textarea 和单行大字段基本不触发建议
浏览器地址自动填充依赖字段粒度。把“上海市浦东新区张江路123号”塞进一个 <textarea autocomplete="street-address">，99% 情况下不会触发任何建议——它需要至少两个关联字段（如 street-address + address-level2）且都在同一 <form> 内。
实操建议：
- 中国地址最低要求：
<input autocomplete="street-address">+<input autocomplete="address-level2">（市）+<input autocomplete="address-level1">（省） - 避免用
address-line1/address-line2替代street-address，前者主要用于国外多行街道（如 “123 Main St” + “Apt 4B”），国内语义不匹配 -
postal-code在中国几乎不触发自动填充（浏览器极少保存中国邮编），可保留但不必强依赖；日本/德国/美国则较可靠 - 所有地址字段必须初始存在于 DOM、不可动态 append，且不能 display: none 或 visibility: hidden（哪怕只是暂时）
触发自动填充的隐藏条件比文档写的更苛刻
即使 autocomplete 全对、结构也规范，仍可能不出现下拉建议——问题往往出在交互链路上。
必须满足的硬性条件：
- 用户必须曾主动聚焦过该字段（鼠标点击或 Tab 进入），
input.focus()自动唤起无效 - 表单必须成功提交过至少一次（浏览器据此建立字段映射关系），首次访问页面必不触发
- 字段必须在
<form>内，单独的<input>不会被记录 - 用户若在 Chrome 设置里清过 “Saved passwords and payment methods”，历史填充数据就彻底丢失，此时右键手动选“自动填充”是唯一补救方式
- Safari 对
autocomplete的校验更严：若同名字段（如多个autocomplete="tel"）出现在不同<form>，可能互相干扰
跨国维护最易被忽略的一点：不同国家用户的浏览器保存习惯差异极大。德国用户普遍保存完整地址，而中国用户几乎只存姓名+手机号+邮箱——street-address 字段在多数中文环境里本质是“尽力而为”，别把它当作必填保障。
