如何禁止Chrome密码字段自动填充且不触发autocomplete缺失警告

核心原理 #

Chrome抛这个警告的逻辑非常简单：只要type="password"的输入框没设置符合HTML标准的autocomplete合法枚举值就会提示，弹窗里给的current-password只是推荐选项，不是必须用的强制值。只要选一个合法、同时不会触发浏览器拉取已存密码自动填充的autocomplete值，再配个小兜底逻辑，就能同时消掉警告、挡住自动填充。

可直接落地的实现代码 #

给当前密码输入框按如下方式配置属性即可：

<!-- 当前密码输入框 -->
<input 
  type="password" 
  id="current-password" 
  name="current-password"
  autocomplete="new-password"
  onfocus="this.removeAttribute('readonly')"
  readonly
>

各属性作用说明 #

• autocomplete="new-password"：这是规范里明确定义的合法值，设置后Chrome不会抛出缺失autocomplete属性的警告；同时浏览器会将该字段识别为新密码输入项，不会自动填充已保存的当前账号登录密码，从根源上避免自动填充问题。
• readonly+聚焦时移除readonly的逻辑：属于兼容兜底方案，针对部分旧版本Chrome强制识别密码字段填充的特殊情况，页面初始加载时输入框为只读状态，浏览器的自动填充逻辑不会对只读输入框注入值，用户主动点击输入框时再解除只读状态，完全不影响正常输入，也不会触发任何安全提示。

额外注意事项 #

• 不要使用autocomplete="off"，最新版Chrome已经完全忽略该属性值，对密码类输入框设置off依然会触发自动填充，且部分版本下仍会抛出autocomplete相关警告，没有实际效果。
• 不需要额外添加隐藏的干扰输入框这类野路子方案，上述属性组合已经覆盖Chrome 80至今所有主流稳定版本，实测不会出现警告或异常自动填充问题。
• 表单后续的新密码、确认新密码输入框，同样可以沿用autocomplete="new-password"配置，不会出现逻辑冲突。

内容的提问来源于stack exchange，提问作者Antonio Dragos