onsearch事件仅在点击×清除按钮或按回车键时触发，需置于form内且支持enterkeyhint="search"，Safari/Chrome支持而Firefox不支持，不可替代oninput用于实时搜索。
onsearch 事件只在特定操作后触发
onsearch 不是“用户一输入就触发”，它只在两个明确动作后发生：点击输入框右侧的 × 清空按钮，或按回车（Enter）键（移动端软键盘显示“搜索”时点它）。Safari 和 Chrome 支持较好，Firefox 完全不支持该事件——别把它当 oninput 用。
常见错误现象：绑了 onsearch 却没反应，大概率是因为没把 <input type="search"> 放进 <form>；或者用了 event.preventDefault() 在 submit 里，又没手动调用搜索逻辑，结果表单被拦住、search 也不发。
- 必须包裹在
<form>中，否则 Safari 可能不触发search -
search触发时，el.value已是最终值（含清空后的空字符串），不用再读event.inputType - 移动端软键盘“搜索”按钮是否生效，取决于：
enterkeyhint="search"+<form>存在 + input 没被readonly或disabled
监听 search 事件的正确写法
别用内联 onsearch="myFunc()"，优先用 addEventListener，兼容性和可维护性更好。注意它不能取消（event.cancelable === false），所以别写 e.preventDefault()。
示例：
立即学习“前端免费学习笔记（深入）”；
const searchInput = document.querySelector('input[type="search"]');
searchInput.addEventListener("search", () => {
const q = searchInput.value.trim();
if (q) {
doSearch(q); // 你的搜索逻辑
} else {
clearResults(); // 清空结果，不是“什么都不做”
}
});
- 不要依赖
event.target取值——search事件的target就是 input 元素本身，但直接用变量引用更稳 - 别和
onsubmit混用：如果同时监听form.onsubmit并preventDefault()，search仍会触发，但表单不提交；这是正常行为，不是 bug - Chrome 对粘贴后直接按回车的支持比 Safari 更稳定；Safari 在点击 × 后可能跳过
input事件，只发search——所以search是清空/确认的可靠信号点，不是实时响应通道
为什么不能只靠 onsearch 做搜索？
因为 onsearch 不覆盖所有用户意图：比如用户打字中途想看建议、输入一半就切走、语音输入后没按回车……这些场景下 onsearch 根本不触发。真正要做防抖搜索（如输入暂停 300ms 后请求），必须用 oninput + AbortController。
-
oninput是唯一能捕获所有输入方式（键盘、粘贴、拖入、语音）的事件 -
onsearch适合做“终态确认”：提交、清空重置、记录搜索完成埋点 - 如果页面用 SPA 路由（如 React Router），
onsearch触发时记得手动更新 URL 查询参数，否则刷新后搜索状态丢失 - 某些 WebView（如微信内置浏览器）忽略
enterkeyhint，此时需 fallback：监听search+ 点击搜索按钮双路径
移动端软键盘“搜索”按钮不出现怎么办
不是加了 type="search" 就自动显示“搜索”键。Android Chrome 和 iOS Safari 都要求三要素同时满足：input 在 <form> 内、有 name 属性、设置了 enterkeyhint="search"。
- 漏掉
name属性 → 表单提交时不带值，且部分 WebView 不识别“搜索”语义 - 写了
enterkeyhint="go"或没写 → 键盘右下角显示“前往”或“完成”，点它不会触发search - 父容器设了
touch-action: none或user-select: none→ 点击失效，键盘弹不出 - iOS 上点击后键盘闪退？可能是聚焦后立即触发滚动，尝试
setTimeout(() => input.focus(), 0)
最麻烦的不是写出来，而是让那个小输入框在各种机型、各种嵌套层级下，稳稳当当弹出键盘、接受输入、不丢焦点、不误触。细节全在 DOM 状态和事件生命周期里，不在 CSS 样式里。
