如何解决HTML表单设置autocomplete="off"仍无法阻止Chrome/Firefox密码自动填充？

以下是几种经过验证的有效解决方案：

• 使用autocomplete="new-password"
  现代浏览器（包括Chrome和Firefox）都支持这个属性值，它明确告知浏览器该字段是用于设置新密码的，不会触发自动填充行为。
  代码示例：

  <input type="password" name="user-password" autocomplete="new-password">
  

• 添加隐藏的“诱饵”密码字段
  在真实密码字段之前插入一个隐藏的密码字段，让浏览器优先填充这个诱饵，从而跳过真实字段。注意要确保诱饵字段不可见且能被浏览器识别。
  代码示例：

  <!-- 诱饵字段：隐藏且设置autocomplete="on" -->
  <input type="password" style="position: absolute; left: -9999px;" autocomplete="on">
  <!-- 真实密码字段 -->
  <input type="password" name="actual-password" autocomplete="off">
  

• 动态切换字段类型
  页面加载时将密码字段设为text类型，在用户点击输入框（获取焦点）时再改为password类型。这种方式会让浏览器无法提前识别为密码字段，避免自动填充。
  代码示例：

  <input type="text" id="dynamic-password" autocomplete="off">
  <script>
    const passwordField = document.getElementById('dynamic-password');
    passwordField.addEventListener('focus', () => {
      passwordField.type = 'password';
    });
  </script>
  

• 表单+字段双重设置autocomplete
  同时在表单标签和密码字段上设置autocomplete属性，增强浏览器识别度。表单设为autocomplete="off"，字段设为autocomplete="new-password"。
  代码示例：

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

• Firefox专属：readonly+聚焦移除属性
  Firefox不会自动填充标记为readonly的字段，因此可以初始给密码字段加上readonly，在用户聚焦时移除该属性。
  代码示例：

  <input type="password" name="firefox-password" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');">
  

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