HTML input onsearch事件在Safari中不触发的问题及规避方案探讨

算力阿峰

2026-6-14

解决方案：Safari搜索框清除按钮不触发onsearch的替代方案

针对MacOS Safari 18.3中搜索框清除按钮点击不触发onsearch事件的问题，有以下两种可行的规避方案：

方案1：使用`input`事件替代`onkeyup`和`onsearch`

input事件会在输入框内容发生任何变化时触发（包括字符输入、删除、点击清除按钮清空），兼容性更好，能覆盖所有你需要的场景：

修改原代码中的事件绑定部分：

// 移除原有的onkeyup和onsearch绑定
// inputObj.onkeyup = ...;
// inputObj.onsearch = ...;

// 添加input事件监听
inputObj.addEventListener('input', function(e) {
  SearchTextChange(Category, true, SideMenu);
  StopPropagation(e);
});

这样无论用户是输入字符、退格删除，还是点击清除按钮，都会触发SearchTextChange函数，完全替代原来两个事件的作用。

方案2：监听点击事件判断清除按钮（针对Safari特定场景）

如果你需要保留原有事件逻辑，可额外监听搜索框的点击事件，判断是否点击了内置的清除按钮：

inputObj.addEventListener('click', function(e) {
  // Safari中清除按钮位于输入框右侧，通过点击坐标判断
  const rect = this.getBoundingClientRect();
  const clickX = e.clientX - rect.left;
  // 清除按钮宽度约为20px，可根据实际情况调整阈值
  if (clickX >= rect.width - 25 && this.value.length > 0) {
    SearchTextChange(Category, true, SideMenu);
    StopPropagation(e);
  }
});

这个方案需要根据实际情况调整按钮宽度的阈值，不如方案1通用，但可以在不改动原有事件逻辑的情况下补充处理清除按钮的点击。