如何在HTML中禁用用户名输入框的自动填充功能？

嘿，我懂你现在的困扰——密码框那边用text类型加-webkit-text-security的方案已经完美解决了自动填充和保存提示的问题，但用户名输入框的自动填充还在顽固地跳出来，对吧？结合你的场景，我给你几个经过开发者们验证的实用方案，你可以根据自己的情况尝试：

• 诱饵输入框陷阱
  很多浏览器会自动识别页面里的用户名/密码字段，哪怕你设置了autocomplete="off"也没用。这时候可以在真实的用户名输入框前后添加隐藏的“诱饵”输入框，让浏览器优先填充这些看不见的字段，放过你的真实输入框：

  <!-- 隐藏的诱饵字段，用来迷惑浏览器的自动填充逻辑 -->
  <input type="text" name="fake-username" autocomplete="username" style="position: absolute; left: -9999px; top: -9999px;">
  <input type="password" name="fake-password" autocomplete="password" style="position: absolute; left: -9999px; top: -9999px;">
  
  <!-- 你的真实用户名输入框 -->
  <input type="text" name="username" id="username" autocomplete="off">
  

  这里用绝对定位把诱饵移到可视区域外，比display: none更稳妥，因为有些浏览器会忽略display: none的字段。

• 动态修改属性绕过自动填充
  有些浏览器会在页面加载初期就扫描输入框的属性，所以可以用JavaScript在输入框获得焦点时动态修改属性，让浏览器的自动填充逻辑失效：

  <input type="text" name="username" id="username" autocomplete="off">
  
  <script>
  const usernameInput = document.getElementById('username');
  // 聚焦时修改autocomplete为不被识别的值
  usernameInput.addEventListener('focus', () => {
    usernameInput.setAttribute('autocomplete', 'none');
  });
  // 失焦时恢复，避免影响其他逻辑
  usernameInput.addEventListener('blur', () => {
    usernameInput.setAttribute('autocomplete', 'off');
  });
  </script>
  

  另外，你也可以尝试动态切换输入框类型——初始设为search（浏览器一般不会自动填充搜索框），聚焦时改成text：

  <input type="search" name="username" id="username" autocomplete="off">
  
  <script>
  const usernameInput = document.getElementById('username');
  usernameInput.addEventListener('focus', () => {
    usernameInput.type = 'text';
  });
  usernameInput.addEventListener('blur', () => {
    usernameInput.type = 'search';
  });
  </script>
  

• 针对Chrome的特殊属性
  如果你主要面对Chrome浏览器的用户，可以试试这个非标准的属性，它对Chrome的自动填充逻辑有奇效：

  <input type="text" name="username" id="username" autocomplete="chrome-off">
  

• 全局表单禁用
  给整个表单加上autocomplete="off"属性，配合单个输入框的设置，有些浏览器会优先尊重表单级别的设置：

  <form autocomplete="off">
    <input type="text" name="username" id="username" autocomplete="off">
    <!-- 你的密码输入框 -->
    <input type="text" name="abc" id="abc" style="-webkit-text-security: desc;">
  </form>
  

需要注意的是，不同浏览器的自动填充逻辑一直在更新，可能单个方案不一定能覆盖所有情况，建议你把几种方法组合起来用（比如诱饵输入框+表单级autocomplete="off"），这样兼容性会更好。

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