autocomplete="new-password"有时无效，因其仅在注册/改密等明确新密码场景且配对email/username字段、置于原生form内、未隐藏时才被浏览器信任。
为什么 autocomplete="new-password" 有时没用
浏览器对 autocomplete="new-password" 的支持依赖于上下文：它只在「密码输入框处于注册、重置、修改密码等明确需要新密码的场景」下才生效。如果只是给一个孤立的 <input type="password"> 加上这个属性，而表单没有语义结构（比如没配对的用户名/邮箱字段），Chrome 或 Safari 可能直接忽略它，继续自动填充已保存的旧密码。
常见错误现象：Autofill is not triggered for new-password 控制台无报错，但旧密码仍被填入；或者表单提交后，浏览器弹出“保存密码”提示，说明它误判为登录流程。
- 必须确保该密码字段位于完整表单内，且表单有明确目的（如
action="/register"或包含name="password_confirmation"等语义字段） - 避免在登录页的密码框上滥用
new-password—— 登录页应设为autocomplete="current-password" - Chrome 95+ 要求同域下存在至少一个
autocomplete="username"或autocomplete="email"字段，才会信任后续的new-password
autocomplete="new-password" 的正确搭配写法
单独写 autocomplete="new-password" 不够。浏览器需要识别整个表单是“创建新账户”，而不是“补全已有账户”。关键在于字段顺序和配套属性。
推荐写法（注册页示例）：
-
autocomplete="email"和autocomplete="username"必须出现在new-password字段之前，且不能被display: none或visibility: hidden隐藏（否则 Chrome 视为无效） - 两个密码框都设
new-password是安全做法 —— 浏览器不会因此冲突，反而强化“这是新凭证”的信号 - 不要用
name="password1"或id="pwd"这类无语义的命名，优先用标准 name 值（password,new_password）
遇到 Safari 或旧版 Edge 不生效怎么办
Safari 对 autocomplete 的解析更严格：它要求表单有 method="post"，且密码字段不能出现在 div 包裹的“伪表单”中（即必须是原生 <form></form> 子元素）。Edge 18 及更早版本则完全忽略 new-password。
- 绕过方案：对 Safari 添加
autocomplete="off"+ 随机name（如name="password_<timestamp>"</timestamp>），再用 JS 绑定真实值 —— 但这会牺牲无障碍支持，仅作兜底 - 更稳妥的做法是服务端生成唯一
name（如name="reg_pwd_abc123"），配合autocomplete="new-password"，既防自动填充又保持语义 - 注意：设置
autocomplete="off"在现代浏览器中已被忽略，不能替代new-password
测试是否真正生效的三个检查点
别只看页面渲染结果。真正生效的标志是浏览器行为变化，而非 HTML 属性存在。
- 打开 Chrome 开发者工具 → Application → Autofill → 查看当前页面是否被识别为 “Sign up” 类型（不是 “Sign in”）
- 手动触发密码填充（右键 → “Fill password”）时，候选列表里不应出现该账号的历史密码项
- 提交表单后，浏览器不弹出“Would you like to save this password?”提示 —— 如果弹了，说明它仍认为这是登录流程
最易被忽略的是表单的语义完整性：哪怕所有属性都写对了，只要缺一个 email 字段或 action 指向 /login，浏览器就可能降级处理。这不是 bug，是设计使然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
