input[type="search"]需配合form、name属性和submit事件拦截才能正常工作；单独使用无提交能力，必须设method="GET"、name属性及有效action，清空按钮样式需分浏览器处理，交互逻辑应区分input与submit时机。
input[type="search"] 本身不实现搜索逻辑，只提供语义、清空按钮和软键盘优化；真正能用起来，靠的是 form 包裹、name 属性、submit 事件拦截这三样——缺一不可。
为什么单独写 input[type="search"] 按回车没反应
浏览器只在 form 元素上监听提交行为，input 自身没有提交能力。即使加了 type="search"，没包 form 就等于放弃所有原生交互路径：回车、软键盘“搜索”键、点击提交按钮全失效。
- 常见错误是用
div或span模拟容器，或只靠keydown监听 Enter 键——后者漏掉清除后回车、语音输入确认等场景 -
form必须带method="GET"，否则参数不会出现在 URL 中，分享、刷新、缓存都成问题 -
input必须有name（如name="q"），否则FormData取不到值，后端也收不到参数 - 别设
action=""或留空，至少写action="/search"，方便降级到服务端处理
清空按钮样式改不了？不是 CSS 写错，是伪元素不统一
Chrome/Safari 用 ::-webkit-search-cancel-button，旧 Edge 用 ::-ms-clear，Firefox 默认不渲染——它们不是普通 DOM 节点，不能调颜色、尺寸，也不能用 display: none 一刀切。
- 隐藏方案要分开写：
input::-webkit-search-cancel-button { appearance: none; }和input::-ms-clear { display: none; } - Safari 15.4+ 对
appearance: none更严格，得补上-webkit-appearance: none - 想自定义图标？别覆盖伪元素，用绝对定位的
button盖住右侧，再配合input.addEventListener('input', () => { clearBtn.style.display = input.value ? 'block' : 'none'; }) - Firefox 不显示原生按钮，但会触发
search事件，JS 逻辑不能依赖按钮是否可见
该监听 input 还是 submit？看你要什么时机
实时过滤列表用 input，确认搜索动作用 submit——混用或错绑会导致漏触发、误触发、焦点混乱。
立即学习“前端免费学习笔记（深入）”；
-
oninput捕获所有内容变化（粘贴、语音、长按输入），适合防抖后做建议或本地过滤；但别忘了加 300ms 防抖，否则每敲一个字都发请求 -
onsubmit绑在form上，才是真正的“用户确认”信号，覆盖回车、软键盘搜索键、点击按钮所有路径 - 别用
onkeyup：长按按键、切换输入法、方向键都会触发，且漏掉粘贴和语音 - 取值推荐
new FormData(form).get('q')，比input.value更健壮（自动处理空格、编码、trim）
移动端聚焦失败？大概率是布局或事件被吞了
iOS 和 Android 对 input 聚焦异常敏感，尤其嵌套在 position: fixed、transform 或复杂滚动容器里时。
- 检查父容器有没有
touch-action: none或user-select: none，它们会直接拦截焦点事件 - 避免
input被设为disabled或readonly（除非真不需要编辑） - iOS 点击后键盘闪退？可能是聚焦瞬间触发了页面滚动或重绘，试试
setTimeout(() => input.focus(), 0) - 软键盘“搜索”键不出现？
type="search"是必要条件，但不是充分条件；iOS 还要看inputmode="search"和lang属性是否配合
最易被忽略的一点：没加 label 或 aria-label 的 input[type="search"]，语音助手可能直接跳过它——语义不只是给开发者看的。
