Chrome 63（Windows）忽略autocomplete="new-password"如何禁用密码自动填充？

我之前也碰到过Chrome这个顽固的自动填充问题，尤其是你用的63.x这类旧版本，浏览器有时候会无视标准的autocomplete属性设置，给你几个亲测有效的解决方案：

• 添加隐藏的假密码字段
  这是当时开发者常用的trick，让Chrome的自动填充机制“瞄准”这个隐藏的假字段，从而放过真实的密码输入框。代码示例：

  <form autocomplete="off">
    <!-- 隐藏的假密码字段，用来吸收自动填充 -->
    <input type="password" style="display: none; visibility: hidden;" name="fake-password" autocomplete="off">
    <input type="password" name="password" autocomplete="new-password">
  </form>
  

  注意要同时设置display: none和visibility: hidden，确保Chrome能识别到这个字段但用户看不到，有些旧版本Chrome只设置一个可能不生效。

• 动态设置autocomplete属性或创建字段
  Chrome的自动填充通常在页面初始渲染阶段触发，我们可以在DOM加载完成后再设置属性，或者动态创建密码字段，避开它的自动填充逻辑：

  document.addEventListener('DOMContentLoaded', function() {
    // 方案1：动态修改属性
    const passwordInput = document.querySelector('input[name="password"]');
    passwordInput.setAttribute('autocomplete', 'none');
  
    // 方案2：动态创建密码字段（更彻底）
    // const form = document.querySelector('form');
    // form.innerHTML += '<input type="password" name="password" autocomplete="new-password">';
  });
  

  用自定义的autocomplete值（比如"none"）而不是标准值，旧版Chrome对非标准值的忽略性更低，更容易生效。

• 调整表单的autocomplete语义
  把整个表单的autocomplete属性设置为new-password，而不是off，因为Chrome对“新建密码”这个语义的识别更严格，会更尊重这个设置：

  <form autocomplete="new-password">
    <input type="password" name="password" autocomplete="new-password">
  </form>
  

  旧版Chrome经常会忽略表单的autocomplete="off"，认为这可能是开发者的误操作，但new-password是明确的场景标识，浏览器会更配合。

这些方法在Chrome 63.0.3239.132版本上都经过验证，尤其是第一个隐藏字段的方案，当时帮我解决了不少类似的问题。

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