仅提供语义和原生ui（如清空按钮、搜索键盘），不自带搜索功能；必须用 包裹、设 method="get" 和 name="q"，否则回车/软键盘无效、后端收不到参数。
直接说结论：用 <input type="search"> 不等于有了搜索功能，它只是个带语义、清空按钮和软键盘优化的文本框；真正能用起来，必须包 <form></form>、设 name、配 method="get"，否则回车不提交、移动端「搜索」键失效、后端收不到参数。
为什么单独写 <input type="search"> 按回车没反应
浏览器只在 <form></form> 上触发 submit 事件，type="search" 本身不绑定任何提交逻辑。你看到的清空按钮、历史下拉、语音图标，全是语义触发的 UA 行为，不是功能闭环。
- 漏掉
<form></form>包裹 → 回车、软键盘「搜索」键、点击清空后再回车，全部无响应 -
<form></form>没写method="get"→ 提交后 URL 不带参数，无法分享或刷新复现 -
<input>缺name属性（比如name="q"）→ 表单序列化时被忽略，FormData.get('q')返回null，后端收不到值 - 写了
action=""或留空 → 部分浏览器会跳转到当前路径根目录，而非预期接口
oninput 和 onsearch 到底监听哪个
oninput 捕获所有内容变化（粘贴、语音输入、长按编辑），onsearch 只在用户“确认搜索”时触发（回车、点击清空按钮、软键盘确认）。两者用途完全不同，别混用。
- 做实时过滤/搜索建议 → 用
oninput+ 防抖（如 300ms），避免高频请求 - 做最终提交动作（比如跳转或发请求）→ 监听
form的submit事件，event.preventDefault()后取new FormData(form).get('q') -
onsearch很少单独用：它和oninput有重叠，且 Firefox 不支持该事件，兼容性差 - 别监听
onkeyup判断 Enter：会误触 Ctrl+A、方向键、Shift+Enter 等，逻辑不可靠
清除按钮样式怎么统一控制
原生清除按钮不是普通 DOM 元素，各浏览器用不同伪元素实现，不能自由调色缩放，强行覆盖容易破坏可访问性。
- Chrome/Safari 用
input::-webkit-search-cancel-button { appearance: none; } - 旧 Edge 用
input::-ms-clear { display: none; } - Safari 15.4+ 要加
-webkit-appearance: none才生效 - Firefox 默认不渲染清除按钮，但
search事件仍可用，JS 逻辑不能依赖按钮是否可见 - 若必须自定义图标 → 放弃原生按钮，用绝对定位
<button></button>覆盖右侧，配合input.addEventListener('input', () => { clearBtn.style.display = input.value ? 'block' : 'none'; })控制显隐，同时补上ESC键监听和屏幕阅读器aria-label
移动端聚焦失败或键盘闪退怎么办
iOS 上点不动、键盘弹出又消失，大概率是聚焦被阻断，而不是 HTML 写错了。
- 检查
input是否被设为disabled或readonly→ 这俩属性直接禁用聚焦 - 父容器是否加了
touch-action: none或user-select: none→ 它们会拦截 touch 事件，导致点击无响应 - 页面是否在聚焦瞬间触发滚动或重绘 → 可加
setTimeout(() => input.focus(), 0)缓一帧再聚焦 - 软键盘显示「搜索」键不是 100% 可控：需
type="search"+inputmode="search"+ 页面lang属性正确，但最终仍取决于系统输入法和语言设置
最容易被忽略的是：移除原生清除按钮后，没提供替代清空方式（比如 ESC 键或显式按钮），键盘用户就卡死了；还有，placeholder 不是可访问性替代方案，必须配 <label for="id"></label> 或 aria-label，否则语音助手可能跳过这个输入框。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
