浏览器忽略autocomplete="off"，有效方案是拆分表单或动态插入密码字段：先仅渲染邮箱输入与发送按钮，校验成功后js动态创建唯一name的password输入框并聚焦，彻底规避自动填充。
autocomplete="off" 在密码重置按钮上根本不起作用
浏览器（尤其是 Chrome 和 Edge）会忽略 autocomplete="off" 对 <input type="password"> 或关联表单的强制禁用。当页面包含“重置密码”类按钮（比如 <button type="submit"></button> 或带 onclick 的 <button></button>），若其父 <form></form> 内有 type="password" 字段，浏览器仍可能在点击时触发密码填充建议——哪怕你加了 autocomplete="off"。
真正有效的绕过方式：拆分表单 + 隐藏 password 字段
核心思路是让浏览器无法将“重置操作”与“密码字段”建立语义关联。关键不是禁用 autocomplete，而是破坏自动填充所需的上下文。
- 把密码重置请求（如邮箱提交）和密码设置（新密码输入）拆成两个独立
<form></form>，中间不共用任何name或id为password、new-password、current-password的字段 - 如果必须单页完成，把新密码输入框初始设为
display: none，仅在收到服务端校验成功响应后才用 JS 切换为display: block并聚焦 —— 此时浏览器已错过自动填充时机 - 避免给密码字段设
name="password"或name="pwd"；可改用无意义名如name="pw_reset_7x2"，但注意：Chrome 117+ 会回退到id和placeholder推断，所以id也别叫password
autocomplete="new-password" 不是万能解，反而可能触发填充
autocomplete="new-password" 的本意是提示浏览器“此处用于设置新密码”，但它常被误读为“请填充一个新密码”，尤其在表单含多个密码字段或前后有登录字段时。实际效果高度依赖浏览器版本和上下文。
- 在重置流程中，首次出现的密码字段若设
autocomplete="new-password"，Chrome 可能直接弹出密码生成器浮层，干扰用户输入 - 若该字段紧邻
autocomplete="email"或autocomplete="username"，部分浏览器会尝试关联已有账号并填充旧密码 - 更稳妥的做法：对新密码字段使用
autocomplete="off"+ 随机name+ 动态插入 DOM（而非初始渲染）
服务端 token 校验后才暴露密码字段，是最可靠的防线
前端所有 autocomplete 折腾都是防御性措施，真正防止误填充的硬手段，是让密码输入框根本不参与初始页面加载和浏览器自动填充生命周期。
- 重置页面只渲染邮箱/手机号输入框和“发送验证码”按钮，表单
action指向验证码发送接口 - 验证码校验成功后，JS 动态创建
<input type="password" name="reset_pw_<uuid>">并插入到 DOM，再调用input.focus() - 此时该 input 无历史交互、无关联表单、无预设值，浏览器既不会填充也不会生成密码建议
- 注意：动态插入的 input 必须确保
name值每次唯一（可用Date.now()或短 uuid），否则某些旧版 Safari 会复用上次的 autocomplete 缓存
真正难处理的是多步骤重置页里「跳转后保留原密码字段」的场景——只要那个字段曾存在于 DOM 中哪怕 100ms，就可能被浏览器记住。动态销毁 + 重新创建，比任何 autocomplete 属性都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
