autocomplete属性值必须严格匹配WHATWG规范关键词（如given-name、email、current-password），大小写、连字符、语义偏差均导致失效；需表单包裹、字段初始可见、name与autocomplete语义一致且成对出现（如密码须current-password+email）。
autocomplete 属性值必须匹配浏览器预定义关键词
浏览器只识别标准的 autocomplete 值（如 "name"、"email"、"tel"、"shipping street-address"），自定义字符串（如 "userNickname" 或 "custom-id"）会被忽略，无法触发自动填充。Chrome、Safari 和 Firefox 对同一字段支持的关键词略有差异，比如 "organization" 在 Safari 中生效，在旧版 Chrome 中可能被降级为 "off"。
实操建议：
- 优先查 MDN 官方列表（
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete），按表单用途选最细粒度的值，例如用"billing country"而非笼统的"country" - 地址类字段务必区分
"shipping"和"billing"前缀，否则浏览器可能填错地址类型 - 避免在
input上写autocomplete="on"—— 这个值已被废弃，现代浏览器不响应
密码字段必须成对出现且 name/type 严格匹配
仅给密码输入框设 autocomplete="current-password" 不够。浏览器需要同时看到 type="password" 的当前密码字段 + type="text" 或 type="password" 的用户名字段（autocomplete="username" 或 "email"），才能激活密码管理器的自动填充和保存逻辑。
常见错误现象：
- 登录页只有
，没配用户名字段 → 密码不自动填充 - 用户名用
type="email"但autocomplete="username"→ 部分浏览器拒绝关联 - 注册页密码二次确认字段用了
autocomplete="new-password"，但主密码字段漏了autocomplete→ 浏览器不提示“保存密码”
禁用自动完成要慎用 autocomplete="off"
autocomplete="off" 并不总能阻止浏览器填充，尤其在密码字段或地址字段上，Chrome 等浏览器会主动忽略它。真正可靠的禁用方式是：用动态生成的 name 或 id（如 name="field_12345"），或把 autocomplete 设为一个无效但看似合理的值（如 "nope"）——这比 "off" 更可能绕过启发式填充逻辑。
但要注意：
- 敏感操作（如二次验证短信输入框）仍建议保留
autocomplete="one-time-code"，它被 Chrome/Firefox 支持，能触发 OTP 自动粘贴 - 不要在整张表单上设
autocomplete="off"，这会影响所有子字段，包括本应可填的邮箱、姓名等 - 若后端要求固定
name（如name="phone"），可在 JS 初始化时临时改掉，提交前再还原，避免影响表单序列化
React/Vue 中动态设置 autocomplete 容易失效
框架中用变量绑定 autocomplete（如 React 的 autocomplete={isLogin ? "username" : "off"}）时，若组件挂载后才更新该属性，部分浏览器（尤其是 Safari）不会重新触发自动填充检测。本质是浏览器只在元素首次渲染时读取该属性。
解决方法：
- 确保
autocomplete值在组件首次render时就确定，不要依赖异步状态（如 API 返回后才设值） - 避免用
useEffect或mounted钩子去后期修改autocomplete属性 —— DOM 已存在，改了也没用 - 如需条件切换，用不同
input元素配合key强制重渲染，例如：vs
真实场景里最常被忽略的是字段语义一致性：同一个邮箱字段，在登录页用 autocomplete="username"，在个人资料页却写成 autocomplete="email"，会导致浏览器认为这是两个不同字段，不复用历史输入。语义对齐比样式对齐更难察觉，也更影响体验。
