搜索框必须用 form 包裹，否则回车不提交、tab 跳不过、屏幕阅读器读不出；需设 name 属性以确保参数提交，推荐加 role="search" 并避免误禁 autocomplete；清除按钮为原生行为，submit 事件才是可靠搜索触发点。
搜索框必须用 form 包裹，否则回车不提交、Tab 跳不过、屏幕阅读器读不出
脱离 form 的 input[type="search"] 看似能输能清，但实际已丢失三项关键能力：按回车无响应、键盘 Tab 键直接跳过该输入框、屏幕阅读器无法识别为“搜索控件”。这不是体验降级，而是 WCAG 2.1 A 级合规直接失败。
常见错误写法：<div><input type="search"></div> 或 <section><input type="search"></section>。即使你后续用 JS 绑定 submit 事件，无障碍链路和原生焦点流也已断裂。
-
form可不写action和method属性（浏览器默认GET），但标签不能省 - 推荐显式加
role="search"，增强旧版屏幕阅读器兼容性 - 移动端 Safari 会因缺失
form拒绝唤起“搜索”软键盘，只显示“前往”
input[type="search"] 的 name 属性不是可选，而是提交前提
没有 name，提交时参数根本不会被序列化。比如 <input type="search" name="q"> 提交后 URL 变成 /search?q=xxx；若漏掉 name，哪怕用户输完按回车，服务端也收不到任何关键词。
别硬套 q —— 如果后端接口要求参数名为 keyword，就设 name="keyword"。语义和 API 合约之间，后者优先。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
autocomplete="off"要谨慎：禁用后用户无法复用历史搜索词，仅在敏感场景（如后台管理搜用户手机号）才启用 - 想避免无关历史干扰，可用
autocomplete="search"，它比off更精准 - 不要用
onchange或blur自动触发搜索——移动端失焦太频繁，用户还没输完就发请求
清除按钮是浏览器原生行为，不是 JS 加的
只要用了 input[type="search"] 且输入非空，Chrome、Edge、Safari 都会在右侧自动渲染 × 按钮。它不依赖 JS，也不需要监听 input 事件手动控制显隐。
问题常出在 CSS 覆盖：比如写了 input::-webkit-search-cancel-button { display: none; } 却忘了给 Firefox 加 input::-moz-search-cancel-button，结果跨浏览器表现不一致。
- 清空按钮点击后，
input值清空并触发input事件，可直接监听做响应（如隐藏建议面板） - 若需自定义逻辑（如同时清空 URL 参数），保留原生按钮，再用 JS 绑定
click事件即可，不必移除它 - Safari 15.4+ 对
-webkit-appearance: none支持更严格，重置外观后务必测试清空功能是否仍可用
监听 submit 事件，而不是 keyup 或 click
真正可靠的“确认搜索”信号只有一个：表单的 submit 事件。它天然覆盖点击按钮、按回车、软键盘“搜索”键所有路径。而 keyup 捕获不到粘贴、语音输入；onclick 绑定按钮则忽略回车和快捷键。
必须调用 event.preventDefault()，否则页面会跳转或刷新；之后可走 AJAX、路由跳转或本地过滤。
- 别写
onsubmit="return false"—— 这种内联写法无法做复杂逻辑，且破坏可维护性 - 如果同时支持实时建议，在
input上监听input事件（不是keydown），并加 300ms 防抖 - iOS Safari 对
search输入框支持search事件，比input更稳定，建议兼容监听
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
