不能靠 autocomplete="off" 保安全，现代浏览器基本忽略它对敏感字段的控制；真正有效的是语义化 autocomplete 值（如 current-password、new-password、cc-number 等）、dom 干扰（隐藏 type="password" 干扰字段）和动态行为（js 动态创建输入框、focus 时切换 type），但所有前端手段仅干扰识别，后端仍须强制重输密码、二次验证支付。
不能靠 autocomplete="off" 保安全，现代浏览器（Chrome、Edge、Safari）基本忽略它对密码、银行卡等字段的控制。真正起效的是语义化取值 + DOM 干扰 + 动态行为组合。
用对 autocomplete 值才能让浏览器“听懂”你的意图
浏览器不是看“要不要填”，而是看“该填什么”。填错值，它要么乱填，要么干脆跳过——这对敏感字段反而是风险。
-
current-password用于登录页密码框：明确告诉浏览器“这是当前账号的密码”，避免错填成其他保存的账号 -
new-password用于注册或改密页：多数浏览器会禁用已有密码填充，并可能触发密码生成器 -
cc-number、cc-exp、cc-csc配合使用时，浏览器才可能联动识别整套支付信息，避免把身份证号误当信用卡号填进去 - 别写
autocomplete="password"或autocomplete="off"——前者不是标准值，后者在密码字段上 Chrome 直接报 warning 并无视
加隐藏干扰字段比单纯设 display:none 更讲究
浏览器自动填充时，会扫描 DOM 找第一个 type="password" 元素并优先填它。利用这点，可以“骗”它去填一个你控制得住的位置。
- 干扰字段必须是
type="password"，且不能带disabled或readonly（部分浏览器会跳过） - 用
style="display:none;"，而不是hidden属性或opacity:0——前者确保它参与解析，后两者仍可能被识别 - 真实密码框初始设为
type="text"，并在focus事件中切换为type="password"，防止页面加载瞬间被预填充 - 干扰字段的
name别用password，比如叫fake_pwd，服务端直接忽略该字段
动态创建输入框能绕过浏览器初始解析阶段
自动填充主要发生在 HTML 解析和 DOM 构建阶段。如果敏感字段是 JS 加载完才插入的，浏览器大概率不会把它纳入候选列表。
- 不要在 HTML 源码里写死
<input type="password">，改用document.createElement('input')动态生成 - 插入前设置好
autocomplete、name、id，但类型可先设为text，交互时再改 - 注意：若页面启用了 CSP（Content-Security-Policy），动态执行
eval或内联脚本可能被拦截，需提前配置script-src - 移动端 WebView（如 iOS WKWebView）对动态创建的支持较稳定，但某些安卓定制浏览器可能延迟触发 focus 事件，需实测
最常被忽略的一点：所有前端手段都只是“干扰识别”，而非“绝对禁止”。只要用户本地保存了某域名下的密码，浏览器就始终保有填充能力。真正兜底的永远是后端——对密码类字段必须强制重新输入，对支付类操作必须二次确认+验证码，不能因前端做了干扰就放松校验逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
