autocomplete="off"根本拦不住密码填充，因为chrome 80+、edge 105+、safari 15.4+已将其视为弱提示并直接忽略，转而依据type、name、dom位置和上下文语义触发填充，且该行为是设计选择而非bug。
autocomplete="off"为什么根本拦不住密码填充
现代浏览器（Chrome 80+、Edge 105+、Safari 15.4+）已将 autocomplete="off" 视为弱提示，尤其对 type="password" 字段直接忽略。这不是 bug，而是浏览器主动策略：它认为密码管理器比手输更安全，所以宁可“填错”也不愿“不填”。
常见现象包括：
- 刷新登录页后，
type="password"输入框自动出现上次登录的密码 - 支付页的
input name="cvv"被填入其他网站保存的 CVV（即使设了autocomplete="off"） - 控制台报 warning：
"autocomplete='off' is not supported"
关键点在于：浏览器填充逻辑不看这个属性，而看 type、name、DOM 位置和上下文语义。单独写 autocomplete="off" 不仅无效，还可能触发更激进的填充行为（比如 Chrome 会弹出“生成新密码”建议）。
autocomplete="new-password" 和 "current-password" 怎么选才有效
autocomplete 不是开关，是语义协议。选错值会让浏览器“理解错你的意图”，比如把验证码当密码填、把银行卡号当地址填。
必须按场景严格匹配：
- 登录页密码框 →
autocomplete="current-password"（告诉浏览器“这是当前账号的密码”，避免错填成其他账户） - 注册页、改密页、设置新密码页 →
autocomplete="new-password"（浏览器会跳过已有记录，且多数密码管理器据此保存新凭据） - 确认密码字段也必须设
autocomplete="new-password"，否则 Safari 可能复用上一次生成的密码填入两个框 -
autocomplete="one-time-code"专用于短信/邮箱验证码，禁用密码管理器，且浏览器不会保存该值
注意大小写与连字符：写成 Autocomplete="New-Password" 或 autocomplete="user_password" 等非标准值，等于没写——浏览器静默降级，不报错也不警告。
动态切换 type 和干扰字段的实际效果与坑
真正起效的不是“禁止”，而是“骗过识别”。浏览器会扫描 DOM 寻找第一个非隐藏的 type="password" 元素并优先填充它。你可以利用这点做误导，而不是硬对抗。
推荐组合策略（按可靠性排序）：
- 插入隐藏干扰字段：
<input type="password" style="display:none;" autocomplete="new-password">放在真实密码框之前（必须是合法 HTML 元素，不能同时disabled或readonly，否则部分国产浏览器跳过） - 动态切换
type：初始设type="text"，onfocus时再改为type="password"（注意 Safari 对此有兼容性限制，且安卓部分 WebView 需点击两次才唤起键盘） - 去语义化
name/id：name="pwd_8a2f"、id="pass_field_x9"，避免使用password、pwd、pass等关键词
特别提醒：Chrome 120+ 要求 autocomplete="new-password" 必须与至少一个 autocomplete="current-password" 字段共存才被认真对待。如果你只有“设置新密码”页面（无旧密码输入），Chrome 会无视该属性，并可能强行填充上次保存的密码。
服务端渲染、框架重渲染导致的自动填充复发
很多问题不是出在 HTML 写法，而是出在 DOM 生命周期里。浏览器填充发生在页面加载初期，JS 尚未介入；而框架或模板引擎可能在 hydration 或 re-render 时重建 input 元素，让浏览器把它当作“新字段”再次填充。
典型场景和应对方式：
- Django/Jinja/Thymeleaf 模板里写了
value="{{ user.password }}"→ 浏览器看到“已有值 + password 类型”就强制填充。解决办法：绝对不要在value属性里渲染任何内容（包括空字符串），删掉它；如需预填充，用 JS 动态赋值：inputEl.value = ""后再focus() - React/Vue 中组件 re-render 导致 input 销毁重建 → 给密码 input 加稳定
key（如:key="'password-input-1'"），并在useEffect或mounted里手动清空value，加 flag 控制只执行一次 - SSR 页面 hydration 后，前端状态更新导致
autocomplete属性被抹除 → 必须确保服务端和客户端的autocomplete值一致，且 JS 不要意外覆盖它
最容易被忽略的一点：表单脱离 <form></form> 标签后，autocomplete 语义基本失效。浏览器倾向只对包裹在语义化 <form></form> 内的字段启用智能填充。
