onsearch事件不触发清除按钮点击，需监听input事件并检测value从非空到空的变化来捕获用户主动放弃搜索意图。
onsearch 事件不触发搜索框清空操作
onsearch 是 <input type="search"> 的原生事件，但它只在用户按下回车或点击搜索按钮（如 Safari 的放大镜图标）时触发，**不会在点击清除按钮（圆叉 ×）时调用**。这个 × 按钮是浏览器内置 UI，点击后会清空 input.value，但默认不派发 onsearch，也不触发 input 或 change 事件（Chrome/Firefox/Safari 行为一致）。
监听 clear 按钮必须用 input 事件 + 值变化检测
要捕获用户点 × 后的清空动作，唯一可靠方式是监听 input 事件，并比对前后值：
- 注册
input事件处理器（不是onsearch） - 保存上一次非空值（例如用闭包变量或
data-last-value属性） - 当
event.target.value === ""且上次值非空时，判定为 clear 触发
示例：
<input type="search" id="searchInput" placeholder="搜索..."><script>
const input = document.getElementById('searchInput');
let lastValue = input.value;
input.addEventListener('input', () => {
if (input.value === '' && lastValue !== '') {
// 这里就是用户点了 × 的时机
console.log('clear triggered');
// 执行你的重置逻辑：清空关联结果、重置分页、还原筛选状态等
resetRelatedData();
}
lastValue = input.value;
});
</script>
reset() 和 value = "" 都不能替代 clear 检测
有人尝试在 input 事件里直接调用 form.reset() 或手动设 input.value = ""，这会造成循环或误判：
-
form.reset()只还原 HTML 初始值，如果<input value="默认">，它会回到“默认”，不是清空 - 手动设
input.value = ""会再次触发input事件，若没加防抖或判断，导致无限循环 - 点 × 后 DOM 已更新，此时再设
value = ""是冗余操作，且掩盖了真实用户意图
移动端和 Safari 的 clear 按钮兼容性细节
Safari 在 iOS/macOS 上对 type="search" 的 × 按钮行为最稳定；Android Chrome 也支持，但部分 WebView（如旧版 Cordova）可能不渲染该按钮。此时需额外 fallback：
- 检查
input.showPicker不适用，但可监听search事件配合长按菜单（不可靠） - 更稳妥的做法：在输入框右侧叠加自定义 × 按钮（
position: absolute），绑定click并同步清空input.value和触发业务重置 - 注意：自定义按钮需用
pointer-events: auto，并处理focus状态避免键盘意外收起
真正关键的不是怎么“清空”，而是怎么**确认用户主动放弃了当前搜索意图**——这个信号只能靠 input 事件中从非空到空的跃变来捕捉，其他路径都绕不开这个前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
