autocomplete属性必须填w3c标准语义值（如email、tel、shipping street-address、new-password等）才真正生效，on/off无效；需配合type、name协同且表单结构合规。
autocomplete 属性填什么值才真正生效
填 on 或 off 大概率没用——浏览器早就不认这两个笼统值了，尤其在现代 Chrome、Edge 和 Safari 中。autocomplete 必须配合语义化字段类型（比如 email、tel、shipping postal-code）才能触发自动填充。
常见错误是给自定义字段随便写个 autocomplete="username"，结果密码管理器不识别、地址自动填充也不弹。原因在于：浏览器只信任 W3C 定义的 标准 autofill field names，且要求表单结构合理（比如 input 必须有 name，且 name 与 autocomplete 值逻辑一致）。
-
autocomplete="email"对应邮箱输入，必须搭配type="email"才稳定触发 - 地址类字段需分层标注：
autocomplete="shipping street-address"、autocomplete="billing country"，单写"address"无效 - 密码字段必须成对出现：
autocomplete="new-password"（注册/改密）和autocomplete="current-password"（登录），混用会禁用自动填充
为什么加了 autocomplete 还不弹出建议
不是属性没写对，而是表单被“污染”了——浏览器对 autofill 的启用有隐式条件：
- 页面必须通过 HTTPS 加载（HTTP 下多数浏览器直接禁用 autofill）
-
input不能设disabled或readonly（哪怕 JS 后续移除也不行） - 不能用
display: none或visibility: hidden隐藏字段，浏览器会跳过这些 input - 同一表单中多个
autocomplete="email"字段，只对第一个生效；重复类型需用autocomplete="home email"/autocomplete="work email"区分
另外，Chrome 90+ 开始要求表单至少包含两个可交互字段（比如一个 email + 一个 password），单字段 form 不触发 autofill。
autocomplete 与 type、name 的协同关系
autocomplete 不是独立开关，它和 type、name 共同构成浏览器识别依据。三者不一致时，优先级是：autocomplete > type > name，但 type 错误会直接废掉 autofill。
-
<input type="text" autocomplete="tel">→ 可能失败；<input type="tel" autocomplete="tel">→ 稳定唤起手机号键盘和历史记录 -
name="user_email"但autocomplete="email"→ 正常；反过来name="email"但autocomplete="username"→ 浏览器忽略 -
type="number"配autocomplete="postal-code"在部分 Android 上会错乱（数字键盘挡地址选择），应统一用type="text"
密码字段 autofill 的特殊处理逻辑
密码 autofill 是最易出问题的场景。浏览器不会对任意 type="password" 字段自动填充，必须满足三个硬性条件：
- 该字段必须位于
<form></form>内，且 form 有action（哪怕为空） - 必须存在另一个非密码字段（如
autocomplete="username"或"email"）且用户曾在此站点成功登录过 - 新密码字段必须明确标记为
autocomplete="new-password"；若误写成"password"，Chrome 会拒绝填充并控制台报Ignored attempt to cancel a password autocompletion
还有个隐藏坑：某些前端框架（如 Vue）用 v-model 动态绑定 autocomplete 值，如果初始渲染时值为空或为 "off"，后续 JS 改成 "current-password" 也无效——必须从 DOM 初始状态就正确。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
