搜索框必须用form包裹input[type="search"]，method设为"get"并设name属性；用submit事件而非keyup监听搜索；清除按钮依赖type="search"和css伪元素；需添加aria-label、合理管理焦点以保障无障碍。
搜索框的 HTML 结构必须包含 form 和 input[type="search"]
不套 form 标签的搜索框，按回车无法提交，移动端软键盘「搜索」按钮也无效。浏览器对 input[type="search"] 有原生样式和语义支持（比如自动添加清除按钮、语音输入图标），比用 text 更可靠。
常见错误是只写 input 不包 form，或用 div 模拟表单——这会让无障碍访问失败，且服务端接收不到标准的 GET 查询参数。
-
form的method设为"get"，让关键词直接出现在 URL 中，利于分享和缓存 -
input必须有name属性（如name="q"），否则提交时参数不会被序列化 - 给
input加autocomplete="off"要谨慎：禁用后可能影响用户复用历史词，建议仅在敏感场景（如密码搜索）使用
用 addEventListener("submit") 拦截默认行为再处理搜索逻辑
直接监听 input 的 change 或 keyup 容易误触发（比如用户还没输完就按了方向键），而 form 的 submit 事件才是真正的“确认搜索”信号，覆盖了点击按钮、按回车、软键盘搜索键所有路径。
注意：必须调用 event.preventDefault()，否则页面会跳转或刷新；之后可走 AJAX、路由跳转或本地过滤。
- 不要用
onclick绑定搜索按钮——按钮可能被隐藏或用其他方式触发（如快捷键） - 如果同时支持「实时搜索建议」，应在
input上监听input事件（不是keydown），并加防抖（如 300ms 延迟） - 移动端需额外监听
search事件（Safari/iOS 对search输入框的支持更稳定）
清除按钮的实现依赖 input 的 type="search" 和 CSS 伪元素
现代浏览器对 input[type="search"] 自动渲染清除按钮（X 图标），但默认不可见或样式难控。靠 JS 手动插入按钮不仅冗余，还破坏语义和可访问性。
真正可控的方式是用 CSS 选择器 input[type="search"]::-webkit-search-cancel-button（Chrome/Safari）和 input[type="search"]::-webkit-search-decoration（旧版 Safari），配合 appearance: none 重置后再自定义。
- Firefox 不支持上述伪元素，需用
input[type="search"]+ JS 监听search事件模拟清除逻辑 - 清除按钮点击后，应聚焦到
input并清空值，再触发一次input事件，确保绑定的监听器能响应 - 别用
visibility: hidden隐藏原生清除按钮——它仍占布局空间；改用display: none或opacity: 0配合 pointer-events
无障碍与焦点管理常被忽略的三个细节
一个可用的搜索框，屏幕阅读器必须能准确播报「搜索输入框」，用户 Tab 到它时要有清晰视觉焦点，且搜索后焦点应回到结果区而非卡在输入框。
- 给
input加aria-label="站内搜索"（比placeholder更可靠，后者在输入后消失） - 用
autofocus要克制：仅在搜索页（如 /search）首次加载时启用，避免干扰主流程 - 搜索完成跳转或渲染结果后，用
document.getElementById("results").focus()将焦点移到结果容器，并设tabindex="-1"确保可聚焦
没做这些，键盘用户和视障用户可能根本不知道搜索已执行，或者反复按 Tab 却找不到结果在哪里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
