必须用form包裹input[type="search"]，否则回车和软键盘搜索键无效；需设method="get"、name属性（如name="q"），监听form submit事件并preventdefault，依赖原生清除按钮而非手动实现。
必须用 form 包裹 input[type="search"]，否则回车和软键盘无效
单独写 <input type="search"> 看起来能输、能清空，但按回车没反应，iOS 软键盘上「搜索」键也不触发提交——因为浏览器只在 form 上监听 submit 事件。不包 form 就等于放弃表单语义和默认行为。
常见错误是用 div 或 span 模拟容器，或者直接监听 keyup 判断 Enter 键。前者破坏无障碍，后者漏掉点击清除按钮、软键盘搜索键等路径。
-
form的method必须设为"get"，让关键词出现在 URL 中，方便分享和缓存 -
input必须有name属性（如name="q"），否则提交时参数不会被序列化 - 不要给
form设action=""或留空，至少设成action="/search"便于降级或服务端接收
input[type="search"] 的清除按钮是原生的，别用 JS 插入
Chrome、Safari、Edge 都会在 input[type="search"] 右侧自动渲染 × 清除按钮，点击后清空值并触发 input 和 search 事件。这个行为是语义的一部分，不是装饰。
手动加一个 button 绝对定位覆盖，再用 JS 控制显隐，看似可控，实则带来三个问题：破坏屏幕阅读器识别、清空后焦点管理混乱、移动端点击区域不准。
- 若要隐藏原生按钮，用
input::-webkit-search-cancel-button { appearance: none; }和input::-ms-clear { display: none; } - 若要自定义图标，建议保留原生按钮逻辑，仅用 CSS 覆盖背景图（注意 Safari 15.4+ 要加
-webkit-appearance: none） - Firefox 默认不显示清除按钮，但支持
search事件，所以 JS 逻辑不能依赖按钮是否可见
监听 submit 事件，而不是 keyup 或 change
用户确认搜索的信号只有一个：提交动作。它涵盖所有合法路径——回车、点击搜索按钮、软键盘「搜索」键、点击清除按钮后再回车。而 keyup 会误判方向键、Ctrl+A 等操作；change 只在失焦后触发，无法响应即时提交。
必须调用 event.preventDefault()，否则页面跳转或刷新；之后可走 AJAX、路由 push 或本地过滤。
- 绑定在
form上：form.addEventListener("submit", e => { e.preventDefault(); const q = new FormData(e.target).get("q"); }) - 不要给搜索按钮加
onclick，按钮可能被隐藏、禁用，或由快捷键替代 - 如果需要实时建议（非提交），才在
input上监听input事件，并配防抖（如 300ms）
移动端聚焦异常和 Safari 样式兼容需单独处理
Safari 对 input[type="search"] 有独立默认样式（圆角、内边距、清除按钮尺寸），appearance: none 在某些版本下会同时干掉清除按钮功能，尤其 iOS 17+。
另外，position: fixed 容器里的搜索框，在 iOS 上常出现软键盘弹起后输入框被顶出可视区、或焦点丢失的问题。
- 测试清除按钮是否仍可点击：加了
appearance: none后务必手动点 × 验证 - 避免在
fixed容器中放搜索框；若必须，用viewport-fit=cover+ 动态调整body高度 - Safari 的
search事件比input更可靠——清空后直接读e.target.value就是空字符串，不用额外判断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
