AutoComplete="Off"或autocomplete="new-password"在Chrome/Firefox中失效求解决方案

我之前也跟你一样被浏览器无视autocomplete属性的问题折腾过，确实挺闹心的！下面这些是我亲测有效的变通方案，你可以挨个试试：

• 动态设置自定义autocomplete值
  浏览器只会对它识别的关键词（比如username、password）进行自动填充，我们可以给输入框设置一个随机的自定义autocomplete值，让浏览器无法匹配。比如用JS在页面加载后动态赋值：

  document.addEventListener('DOMContentLoaded', () => {
    const noAutoInputs = document.querySelectorAll('input[data-no-auto]');
    noAutoInputs.forEach(input => {
      input.setAttribute('autocomplete', 'custom-' + Math.random().toString(36).slice(2));
    });
  });
  

  对应的HTML里给需要禁用自动填充的输入框加个标记：<input type="password" data-no-auto>

• 添加隐藏的“诱饵”输入框
  在真实输入框的上方，放置两个隐藏的、命名为浏览器常见字段名（比如username、password）的输入框，让浏览器优先填充这些诱饵，真实输入框就不会被干扰了：

  <!-- 隐藏的诱饵框 -->
  <input type="text" name="username" style="position: absolute; left: -9999px;">
  <input type="password" name="password" style="position: absolute; left: -9999px;">
  
  <!-- 真实输入框 -->
  <input type="text" name="actual-username" autocomplete="off">
  <input type="password" name="actual-password" autocomplete="off">
  

  这里用position: absolute; left: -9999px;比display: none;更稳妥，有些浏览器会忽略display:none的元素。

• 结合readonly与聚焦事件
  给输入框设置readonly属性（浏览器不会填充只读字段），然后在用户聚焦时移除readonly，这样既避免了自动填充，又不影响用户输入：

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

  也可以用JS批量处理：

  document.querySelectorAll('input[type="password"]').forEach(input => {
    input.addEventListener('focus', () => input.removeAttribute('readonly'));
  });
  

• 给表单设置自定义autocomplete值
  有时候单独给输入框设置没用，可以给整个表单设置一个浏览器不识别的autocomplete值，比如：

  <form autocomplete="disable-auto-fill">
    <input type="text" name="user">
    <input type="password" name="pass">
  </form>
  

  浏览器会因为无法识别这个值而放弃自动填充整个表单。

• 针对new-password的特殊处理
  如果autocomplete="new-password"不生效，试试把输入框的name改成不常见的名称（比如new-account-pass），同时结合autocomplete="off"，避免浏览器把它识别为需要填充的密码字段。

这些方法都是我在实际项目中用过的，不同浏览器版本可能效果略有差异，但大部分情况下都能解决问题。

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