如何监听HTML5 type=search输入框的清除按钮点击事件，避免回车触发？

不存在仅适配HTML5 <input type="search"> 自带清除按钮的专属点击事件。原生search事件本身就会在多个场景触发：

• 按下回车键提交搜索时
• 点击输入框自带的清除按钮清空内容时
• 部分浏览器下输入框失去焦点且内容发生变更时

你可以通过判断search事件触发时输入框的内容是否为空，来区分是回车提交还是点击清除按钮触发的事件，修改后的代码如下：

const ENTER_KEY_CODE = 13;
// 注：更推荐使用e.key === 'Enter'替代keyCode判断，keyCode已被Web标准废弃
mySearchBar.addEventListener("keydown", (e) => {
  if (e.keyCode === ENTER_KEY_CODE) {
     console.log("search");
     // 展示搜索结果的逻辑
  }
});

mySearchBar.addEventListener("search", () => {
  // 点击清除按钮时输入框内容会被清空，通过value是否为空区分场景
  if (mySearchBar.value.trim() === '') {
    console.log("clear");
    // 点击清除按钮后的逻辑：清空搜索结果、展示全部内容
  }
});

如果需要覆盖用户输入为空时按回车的边界场景，可以额外加一个变量记录最近一次输入的内容，或者判断最近的交互事件类型来进一步区分，常规场景下上述判断已经可以覆盖需求。

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