autocomplete属性值必须严格匹配whatwg规范标准关键词（如email、tel、given-name、current-password），大小写敏感，非标准值（如user-email、full_name）会被浏览器直接忽略。
autocomplete 属性值怎么选才不被浏览器忽略
浏览器对 autocomplete 的支持不是“写了就生效”，而是严格匹配预定义的 token。比如写 autocomplete="name" 有效，但 autocomplete="full_name" 大概率被无视——Chrome 和 Safari 只认标准值，且大小写敏感。
常见误用是把业务字段名直接当 autocomplete 值，例如 autocomplete="userId" 或 autocomplete="companyName"。这些不会触发任何自动填充，浏览器直接跳过。
- 姓名类统一用
autocomplete="name"（全名）或更细粒度的autocomplete="given-name"/autocomplete="family-name" - 邮箱必须是
autocomplete="email"，写成"user-email"或"mail"都无效 - 密码字段要成对出现：
autocomplete="new-password"（注册/改密）和autocomplete="current-password"（登录），混用会导致密码管理器不识别 - 地址字段优先用语义化组合，如
autocomplete="street-address"、autocomplete="address-level1"（省）、autocomplete="postal-code"，别用"province"或"zip"
input 类型与 autocomplete 的协同关系
type 和 autocomplete 是绑定生效的。比如 type="tel" 搭配 autocomplete="tel"，手机键盘才会弹出数字布局；而 type="text" 即使写了 autocomplete="tel"，也不会触发号码键盘。
更关键的是：某些 autocomplete 值只在特定 type 下被识别。例如 autocomplete="bday"（生日）仅在 type="date" 时被 Chrome 视为有效；若写成 type="text"，即使值对，也不会唤起日期选择器或填充历史生日。
-
type="email"+autocomplete="email"→ 触发邮箱键盘 + 自动填充候选 -
type="number"+autocomplete="tel"→ 键盘仍是数字，但填充逻辑失效（类型冲突） -
type="search"不支持任何autocomplete值，浏览器直接忽略 - 自定义输入（如带格式的身份证号）应保持
type="text"，靠autocomplete="organization"等语义值辅助，而非强行改 type
动态表单中 autocomplete 失效的典型场景
React/Vue 中用状态控制表单显隐，或通过 JS 动态插入 input 元素时，autocomplete 经常不工作。根本原因是：Chrome 要求 input 在页面加载完成时已存在于 DOM，且未被设过 value（哪怕设为空字符串）。
例如在 React useEffect 里创建 input 并赋值 ref.current.value = ""，或 Vue 的 v-model 初始化为非 undefined，都会让浏览器认为该字段“已被用户操作过”，从而禁用自动填充。
- 动态渲染的表单，确保
input节点在挂载时value属性完全不存在（不要写value=""） - 避免在组件初始化时主动设置
input.value，改用defaultValue属性（仅首次渲染有效） - 表单重置后想重新启用自动填充？不能只清空 value，得用
form.reset()或移除再重建 input 节点 - Safari 对动态表单更严格，建议在
setTimeout微任务中插入 input，给浏览器留出解析时机
密码字段为什么总填错或不显示建议
密码域的自动填充机制和其他字段完全不同：它依赖上下文判断“这是新密码还是当前密码”。填错的根本原因往往是 autocomplete 值与表单用途不匹配，或者前后字段顺序混乱。
例如注册页中，如果先出现 autocomplete="current-password"（本不该存在），再出现 autocomplete="new-password"，Chrome 会拒绝填充第二项；又或者两个密码输入框都标了 "new-password"，浏览器无法区分主密码和确认密码。
- 登录页：唯一密码框必须是
autocomplete="current-password" - 注册/改密页：第一个密码框用
autocomplete="new-password"，第二个确认框**不要加 autocomplete 属性**（加了反而干扰） - 避免在密码框上设置
value、defaultValue或初始 v-model 值，否则填充被禁用 - 如果页面有多个表单（如登录+注册切换），确保每次只激活一个含
current-password的表单，否则浏览器混淆上下文
真正难处理的不是怎么写属性，而是浏览器把 autocomplete 当作“信任信号”——一旦某次填写失败，后续同域名下的同类表单可能被降权，需要用户手动在密码管理器里重新授权。这点很容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
