autocomplete="off"在chrome/firefox/safari中无效，因浏览器主动忽略该属性以保障密码管理器体验；应改用语义化值如new-password（注册/改密）、current-password（登录），并配合dom干扰、动态type切换及服务端校验。
autocomplete="off" 对现代浏览器基本无效，尤其在密码、邮箱、卡号等字段上；真正起作用的是语义化取值（如 autocomplete="new-password"）+ DOM 干扰组合策略。
为什么 autocomplete="off" 在 Chrome/Firefox/Safari 里总不生效
这不是你代码写错了，是浏览器主动忽略它。Chrome 自 2020 年起就明确把 autocomplete="off" 视为“不支持的值”，控制台会直接报 warning：autocomplete='off' is not supported。Firefox 和 Safari 同样基于字段语义（name、type、相邻结构）做启发式识别，一旦判定是密码或敏感字段，就跳过该属性。
常见错误现象包括：
- 登录页刷新后，
type="password"框仍被填入旧密码 -
name="email"或placeholder="请输入银行卡号"的type="text"字段被自动填充 - 表单级
<form autocomplete="off"></form>对子元素中密码字段完全没用
autocomplete="new-password" 是密码类字段唯一靠谱写法
W3C 规范明确定义了 new-password 的语义：该字段用于设置新密码，浏览器应禁用已有密码填充，并且不保存本次输入。这是目前注册页、改密页最稳定有效的方案。
但必须满足两个前提：
-
type必须为"password"，仅设autocomplete="new-password"+type="text"无效 - 旧密码字段应设
autocomplete="current-password"，而非"off"——这反而能避免错填成其他账号密码 - 三个密码字段（旧/新/确认）要分别设置：
current-password、new-password、new-password - Safari 对
new-password支持偏弱，若仍填充，可加无意义name辅助干扰，例如name="pwd_new_2026"
对非密码字段（如银行卡号、身份证号）怎么处理
浏览器对 name="cc-number"、name="id-card" 这类字段会主动识别并填充，autocomplete="off" 不起作用，甚至 autocomplete="cc-number" 是反效果的（等于明示“请填卡号”）。
可行实操建议：
- 用无意义、带空格的
autocomplete值干扰识别，例如autocomplete="section-credit-card number"（注意中间空格，部分浏览器因此跳过语义匹配） - 动态生成
name和id，比如name="card_7f2a"、id="idnum_x9k3"，避免命中常见敏感关键词 - 对
type="text"卡号字段，初始设type="search"或type="tel"，focus 时再切回text——浏览器通常只对初始type做语义判断 - 服务端必须二次校验：前端所有技巧都只是防误填，不是安全边界。CVV 必须是 3–4 位数字，身份证号需校验长度和校验码
别依赖 autocomplete 值做逻辑判断
浏览器可能在渲染后、JS 执行前就把值塞进 <input>，也可能被用户粘贴、脚本注入绕过。你无法靠 JS 读取 autocomplete 属性值来判断是否被填充。
真正容易被忽略的点是：
-
<meta http-equiv="Cache-Control" content="no-cache">等缓存头对 input 历史记录完全无效，它只影响页面资源加载 - 动态插入 input 元素能绕过部分识别，但必须确保插入时机晚于浏览器自动填充阶段（常需
setTimeout(..., 0)或requestIdleCallback） - 任何含敏感数据的表单，最终必须走 PCI DSS 合规方案（如 Stripe Elements），让卡号、CVV 等字段根本不经过你的服务器
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
