如何使用JavaScript清除HTML表单的自动填充内容？

1. 完善clear函数实现 #

要清空搜索输入框的内容，直接获取元素并将value设为空字符串即可：

function clear() {
  const searchInput = document.getElementById('inputId');
  // 清空输入框内容
  searchInput.value = '';
  // 可选：让输入框获得焦点，方便用户快速再次输入
  searchInput.focus();
}

2. 处理浏览器表单自动填充 #

注意：JavaScript无法直接删除浏览器保存的自动填充历史（这属于浏览器隐私数据，受权限限制），但可以通过以下方式优化体验：

禁止浏览器自动填充输入框

给搜索框添加autocomplete="new-password"（部分浏览器对autocomplete="off"支持不佳，这个属性的兼容性更好），阻止浏览器弹出自动填充列表：

<input type="search" name="searchField" id="inputId" placeholder="Search QuickSearch" autocomplete="new-password">

配合清除按钮优化交互

如果浏览器已有自动填充记录，点击清除按钮时可强制刷新输入框的自动填充属性，收起下拉菜单：

function clear() {
  const searchInput = document.getElementById('inputId');
  searchInput.value = '';
  // 临时关闭自动填充，强制收起下拉列表
  searchInput.setAttribute('autocomplete', 'off');
  setTimeout(() => {
    // 恢复属性，避免影响后续输入的自动填充设置
    searchInput.setAttribute('autocomplete', 'new-password');
  }, 100);
  searchInput.focus();
}

修正HTML语法错误 #

你的按钮标签写法有误，需要用value属性设置按钮显示文字：

<input onclick="clear()" type="button" value="Clear Search Input">

修改后的完整代码 #

<!-- Searching script -->
<script>
  function show() {
    const s = document.getElementById('inputId').value;
    window.location.replace("https://www.google.com/search?q=" + s);
  }

  function clear() {
    const searchInput = document.getElementById('inputId');
    searchInput.value = '';
    // 处理自动填充下拉菜单
    searchInput.setAttribute('autocomplete', 'off');
    setTimeout(() => {
      searchInput.setAttribute('autocomplete', 'new-password');
    }, 100);
    searchInput.focus();
  }
</script>

<input onclick="clear()" type="button" value="Clear Search Input">
<h1>Search The Web</h1>
<!-- Search Button and input -->
<form id="searchForm" onsubmit="event.preventDefault()">
  <input type="search" name="searchField" id="inputId" placeholder="Search QuickSearch" autocomplete="new-password">
  <input type="submit" value="Search" onclick="show()">
</form>

提醒：浏览器的自动填充行为由浏览器自身控制，没有万能方法能彻底清除浏览器保存的历史记录，上述方案主要是优化用户体验，避免自动填充干扰使用。

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