如何通过HTML移除SELECT元素的自动完成功能

嘿，我完全懂你这个痛点——自动完成弹窗挡着页面内容，还影响底部打印，确实烦。既然autocomplete="off"只对input管用，咱们试试这几个针对select的办法：

1. 给整个表单加上autocomplete="off" #

很多浏览器会让表单内的所有元素继承这个设置，包括select。把你的form标签改成这样：

<form autocomplete="off">
  <input type="text" id="nameSearch" name="nameSearch" onkeyup="searchInput(this.value)">
  <div id="searchOutput"></div>
  <!-- 你的SELECT元素 -->
  <select id="targetSelect" name="targetSelect">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
  </select>
</form>

这个方法最简单，大部分现代浏览器都能识别。

2. 给SELECT元素设置专属的autocomplete值 #

如果表单级别的设置不管用，可以给select设置一个不存在的字段名作为autocomplete值，让浏览器找不到匹配的历史记录：

<select id="targetSelect" name="targetSelect" autocomplete="no-history-for-this-select">

浏览器会因为找不到对应历史，自动关闭自动完成弹窗。

3. JavaScript动态禁用（针对顽固浏览器） #

要是上面两种都不行，用JS在select获得焦点时强制重置其状态，阻止自动完成：

document.getElementById('targetSelect').addEventListener('focus', function(e) {
  // 先设置为readonly，阻止自动完成
  this.setAttribute('readonly', true);
  // 立即移除readonly，让用户能正常选择
  setTimeout(() => {
    this.removeAttribute('readonly');
  }, 10);
});

这个小技巧利用了readonly状态下浏览器不会触发自动完成的特性，同时通过定时器快速恢复正常状态，用户几乎感知不到变化。

4. CSS隐藏自动完成弹窗（极端情况） #

如果以上都没效果，试试用CSS针对浏览器的自动完成弹窗做隐藏（仅针对WebKit内核浏览器，比如Chrome）：

/* 隐藏select的自动完成下拉弹窗 */
select::-webkit-calendar-picker-indicator {
  display: none;
}
select:-webkit-autofill {
  background-color: white !important;
}

不过这个方法兼容性稍差，建议作为最后备选。

内容的提问来源于stack exchange，提问作者Marco Di Francesco