autocomplete="new-password"是HTML规范定义的语义化指令，用于声明该密码框用于设置新密码、禁止填充旧密码，并可能触发密码生成器；必须满足type="password"、无预设value、与current-password字段配对三个硬性条件才生效。
配置 autocomplete="new-password" 不是为了“关掉”自动填充，而是向浏览器明确声明：这个密码框用于设置一个全新的密码，请勿填入已保存的旧密码，可考虑调用密码生成器。
必须满足的三个硬性条件
该属性不是开关，浏览器只在语义清晰、上下文合理时才尊重它：
-
type 必须是 password：写成
基本无效 -
不能预设 value：包括 HTML 中写
value=""、JS 初始化赋值或 SSR 渲染时带空字符串，都会触发浏览器误判为“已有内容”，可能强行填充 -
需与 current-password 字段配对出现（Chrome 120+ 强制要求）：比如修改密码页，必须同时存在
autocomplete="current-password"（旧密码）和autocomplete="new-password"（新密码），否则浏览器直接忽略
常见失效场景及对应解法
即使写了 new-password，仍被填充，往往卡在这几个环节：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
表单结构不合规：字段没包在
内，或用 Vue/React 的v-if/ngIf动态移除 DOM，导致浏览器首次扫描时找不到该节点 → 改用v-show或display: none保节点 -
name/id 含敏感词：如
name="password"、id="pwd"，浏览器会优先按命名推断语义，覆盖 autocomplete → 改用name="new_pwd_8a3f"等无含义动态名 -
多个密码字段语义混乱：同一表单内有 3 个
type="password"却只标了 1 个new-password→ 全部明确标注：current-password、new-password、new-password（确认密码也属新密码）
增强可靠性的组合策略
单靠属性不够，需叠加时机与隔离手段：
- 初始用
type="text"+ CSS 伪装：input { -webkit-text-security: disc; }，DOMContentLoaded 后再切为type="password"并设autocomplete="new-password" - 在真实字段前插入干扰项：
，分散浏览器识别焦点 - 为 Safari 和旧 WebView 兜底，可同时写：
autocomplete="off" autocomplete="new-password"（不冲突，后者优先） - 测试前务必清空 Chrome 密码管理器中该域名的所有记录（设置 → 密码 → 删除条目），否则历史数据会干扰判断
不该用 new-password 的典型场景
用错地方反而破坏体验和安全：
-
登录页的密码框：应设
autocomplete="current-password"，否则用户无法一键填充已存账号 -
验证码、二次确认类文本框：应使用
autocomplete="one-time-code"或autocomplete="off"，而非 new-password -
非注册/改密流程中的密码输入：比如支付密码、交易密码等专有场景，建议用
autocomplete="off"配合业务逻辑校验，而非强行套用 new-password
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
