HTML5中autocomplete="off"失效问题：Chrome 73.0.3683.103下无作用

我太懂这种无奈了！Chrome 73版本确实对autocomplete="off"和autocomplete="false"的支持很不友好，默认会直接忽略这些设置。给你几个我当时亲测有效的解决办法，你可以试试看：

• 利用autocomplete="new-password"的特殊处理
  Chrome对这个值的逻辑是：判断这是一个需要用户输入新内容（而非复用已有保存信息）的字段，因此不会触发自动填充。哪怕不是密码输入框，也可以用这个属性值，比如：

  <input type="text" name="username" autocomplete="new-password">
  

  这个方法最简单，大部分场景下都能生效。

• 动态修改字段的name属性
  Chrome是通过字段的name属性来匹配已保存的用户信息的，我们可以通过动态修改name来“迷惑”它：

  <input type="text" name="temp-username" id="real-username">
  <script>
    // 当用户聚焦输入框时，再改成真实的name
    document.getElementById('real-username').addEventListener('focus', function() {
      this.name = 'username';
    });
    // 如果需要表单提交时确保name正确，也可以在提交事件里处理
  </script>
  

  这样Chrome初始化时识别不到匹配的已保存字段，自然不会填充。

• 添加“诱饵”输入框
  在真实输入框前放置一个隐藏的、和真实字段name相同的输入框，Chrome会优先填充这个隐藏的诱饵，真实输入框就不会被自动填充了：

  <!-- 诱饵输入框：用绝对定位移出可视区域，避免影响页面布局 -->
  <input type="text" name="username" style="position: absolute; left: -9999px; top: -9999px;">
  <!-- 真实输入框 -->
  <input type="text" name="username" autocomplete="off">
  

  注意不要只用display: none，部分浏览器会忽略这类隐藏元素的自动填充逻辑，用绝对定位移出视野更可靠。

• 结合readonly和聚焦事件
  Chrome不会自动填充标记为readonly的字段，我们可以先设置输入框为只读，在用户聚焦时再移除只读属性：

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

  这个方法能有效阻止自动填充，同时不影响用户正常输入。

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