autocomplete="off"常失效因浏览器主动忽略，有效方案是改名+随机化+延迟渲染，如用fake_password初始type="text"并onfocus切为password。
在 HTML5 中，autocomplete="off" 并不能在所有浏览器中可靠地禁用自动填充（尤其是密码、邮箱、银行卡等敏感字段），这是由现代浏览器（如 Chrome、Firefox、Edge）主动忽略该属性导致的。真正有效的做法需要结合语义、命名策略和少量 JavaScript 干预。
为什么 autocomplete="off" 常常失效
主流浏览器出于安全与用户体验考虑，会无视 autocomplete="off"，尤其对以下字段：
-
密码类字段（
<input type="password">或带name="password"的文本框） - 邮箱、姓名、电话、地址等常见标识字段
- 表单中存在
<input type="password">时，同表单内其他文本框也可能被自动填充
推荐的绕过方案：改名 + 随机化 + 延迟渲染
核心思路是让浏览器无法识别字段语义，从而放弃自动填充逻辑：
-
避免使用敏感 name 或 id：不要用
name="password"、name="email"、id="card-number"等。可改用无意义名称，如name="field_2a7f"或name="user_cred" -
动态设置 autocomplete 属性：初始不设
autocomplete，或设为无效值（如autocomplete="nope"），在用户聚焦（focus）时再改为"off"或空字符串 -
延迟渲染敏感字段：页面加载时不渲染密码框，等用户点击“显示密码区域”后再用 JS 插入真实
<input type="password">，此时浏览器通常不会预填充
实用示例：防自动填充的密码输入框
下面是一个兼容性较好的写法：
<input type="text" name="fake_password" autocomplete="new-password" onfocus="this.type='password'; this.autocomplete='off'; this.name='real_password';" placeholder="请输入密码">
说明：
- 初始用
type="text"和非标准name，避开识别 -
autocomplete="new-password"是 HTML5 规范中明确用于“新建密码”的合法值，Chrome 等会尊重它（表示不填充已有密码） -
onfocus时才切换为type="password"并修正 name，此时自动填充已错过时机
额外提醒：服务端也要配合
前端控制只是辅助，关键仍在于后端安全：
- 敏感字段（如密码）永远不通过 GET 参数传递，不存于 URL 或日志
- 表单提交必须用
POST+CSRF Token - 若需完全禁用浏览器密码管理器，可在整个表单加
autocomplete="off"（虽不保证生效，但部分旧浏览器仍响应）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
