嘿，我来帮你搞定这个Chrome自动补全的麻烦事儿！

一、禁用Chrome 66的文本框自动补全 #

你试过的autocomplete="off"、autocomplete="false"这些值在Chrome 66及以上版本确实不太好使了——因为Chrome调整了对这个属性的处理逻辑，尤其是针对表单字段的自动填充做了强制优化。这里给你几个可行的方案：

• 自定义不识别的autocomplete值：给输入框设置一个浏览器没有预设的自定义值，比如autocomplete="do-not-autofill"，同时确保输入框的name和id不是"username"、"email"、"password"这类Chrome会自动识别的关键词。示例代码：

  <input type="text" name="user-nickname" id="user-nickname" autocomplete="do-not-autofill">
  

• 前置隐藏假字段（针对用户名/密码组合场景）：如果是登录/注册表单里的用户名+密码字段，Chrome会强制触发自动补全，这时候可以在真实字段前添加两个隐藏的假字段，让Chrome优先填充这些假字段，真实字段就不会被自动填充了：

  <!-- 隐藏的假字段 -->
  <input type="text" name="fake-username" style="position: absolute; left: -9999px;">
  <input type="password" name="fake-password" style="position: absolute; left: -9999px;">
  
  <!-- 你的真实输入字段 -->
  <input type="text" name="real-username" autocomplete="off">
  <input type="password" name="real-password" autocomplete="off">
  

  这里用position: absolute; left: -9999px;比display: none;更稳妥，因为有些浏览器会忽略display: none的字段，而绝对定位隐藏的字段会被Chrome识别并填充。

• JS清空字段（备选方案）：如果上面的方法都不行，可以在页面加载完成后用JavaScript清空输入框的值，不过这个方法会有短暂的自动填充后清空的视觉效果，体验稍差：

  window.addEventListener('load', function() {
    document.getElementById('target-input').value = '';
  });
  

二、关于用户名+密码字段的自动补全疑问 #

没错！当Chrome检测到表单里有用户名字段（通常是type="text"且name/id包含"username"/"email"等关键词），并且下方紧跟着type="password"的字段时，它会默认判定这是登录/注册表单，强制启用用户名的自动补全功能，哪怕你设置了autocomplete="off"也会被忽略——这是Chrome为了提升用户登录体验的默认行为，这时候上面提到的“前置隐藏假字段”方法就是最有效的解决方案。

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