如何在Chrome中禁用autocomplete与autofill（兼容jQuery UI自动完成）

我之前也被Chrome这个烦人的自动填充问题坑过，尤其是和自定义的jQuery UI自动完成组件冲突时，自带的下拉框盖在自定义列表上面，用户体验简直糟透了！结合你提到的不能修改name属性的限制，分享几个亲测有效的方案：

方案1：诱饵输入框法（最推荐） #

Chrome会优先识别并填充它认为是“用户名/密码”这类高频字段，我们可以利用这一点，在真实输入框前加两个隐藏的诱饵输入框，让Chrome把自动填充内容“吸”到这些隐藏框里，完全不干扰你的真实输入：

<!-- 隐藏的诱饵输入框，专门给Chrome自动填充用 -->
<input type="text" style="display: none !important; position: absolute; left: -9999px;" autocomplete="username">
<input type="password" style="display: none !important; position: absolute; left: -9999px;" autocomplete="current-password">

<!-- 你的真实输入框 -->
<input type="text" id="custom-autocomplete" name="your-fixed-name" autocomplete="off">

这里把诱饵框设为绝对定位移出可视区域（比单纯display:none更稳妥，防止某些Chrome版本忽略隐藏字段），同时指定autocomplete属性让Chrome识别为可填充字段。这样你的真实输入框就能彻底摆脱自动填充的干扰，而且完全不影响AJAX请求的name属性。

方案2：动态切换Autocomplete属性 #

利用Chrome在输入框获得焦点时才触发自动填充的特性，通过JS动态切换autocomplete属性，让Chrome找不到可填充的目标：

$(document).ready(function() {
  const $input = $('#custom-autocomplete');
  $input.attr('autocomplete', 'off');

  $input.on('focus', function() {
    // 临时设置一个Chrome不识别的属性值
    $(this).attr('autocomplete', 'random-unique-value');
    // 短时间后改回off，不影响自定义自动完成
    setTimeout(() => {
      $(this).attr('autocomplete', 'off');
    }, 150);
  });
});

这个方法不需要额外的DOM元素，纯JS就能解决，而且同样不会修改name属性，兼容你的AJAX场景。

方案3：CSS消除自动填充视觉残留 #

有时候即使禁用了自动填充，Chrome还是会给输入框加上黄色背景，这个可以用CSS强制覆盖：

/* 覆盖Chrome自动填充的黄色背景 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #ffffff inset !important; /* 替换成你的输入框背景色 */
  -webkit-text-fill-color: #333333 !important; /* 替换成你的文本颜色 */
  transition: background-color 5000s ease-in-out 0s; /* 延长背景色切换时间，变相禁用 */
}

这个是辅助方案，配合前面的方法一起用，能彻底消除视觉上的干扰。

这些方案我都在实际项目中用过，完美解决了Chrome自动填充和自定义自动完成的冲突，而且完全符合你不能修改name属性的要求！

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