必须使用 type="search" 并包裹在 form 中且设置 name 属性，才能启用原生清除按钮、软键盘搜索键、历史联想等平台特性；否则需 js 补全，增加兼容性风险。
搜索框必须用 type="search" 而不只是 type="text"
浏览器对 type="search" 有专门的语义识别和默认行为：iOS Safari 会自动显示「X」清除按钮，macOS Safari 在聚焦时右上角出现圆角背景，部分系统还会启用搜索历史联想。如果只写 type="text"，这些原生能力全部失效，后续得靠 JS 手动补全，反而增加兼容性风险。
常见错误是写成 <input type="text" placeholder="搜索">，看起来一样，但实际缺失语义和平台级优化。正确写法必须是：
<input type="search" name="q" placeholder="搜索商品、品牌..." autofocus>
注意：name="q" 是惯例（尤其对接后端或搜索引擎），autofocus 在单页搜索场景中提升体验，但慎用于模态框内——Safari 在 modal 中可能忽略它。
清除按钮（×）不显示？检查是否被 CSS 重置了
很多项目全局重置了 input 样式，比如写了 appearance: none 或覆盖了 ::-webkit-search-cancel-button，导致清除按钮消失。这不是 bug，是样式主动干掉的。
恢复它的最小成本方案是显式还原：
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
关键点：
-
::-webkit-search-cancel-button只在 Chromium 和 Safari 生效，Firefox 不支持该伪元素（它用的是input[type="search"]原生逻辑，无需额外样式） - 不要用
appearance: auto，它在某些旧版 Chrome 下无效；必须指定searchfield-cancel-button - 如果用了 Tailwind 或其他原子类库，检查是否意外启用了
appearance-none
回车触发搜索，但表单没提交？别漏掉 form 包裹和 submit 事件
纯 input 按回车不会自动提交，除非它在 form 内且表单有可提交的机制。最简健壮写法是：
这样回车直接 GET 请求到 /search?q=xxx。如果要用 JS 处理（比如防抖、跳转路由），则需监听 submit 事件，而不是 keyup：
document.querySelector('form').addEventListener('submit', e => {
e.preventDefault();
const q = e.target.q.value.trim();
if (q) location.href = `/s?k=${encodeURIComponent(q)}`;
});
容易踩的坑：
- 监听
keyup+Enter键码 → 会漏掉屏幕键盘「搜索」按钮、语音输入完成等非键盘提交路径 - 没调
e.preventDefault()→ 表单仍会刷新页面，JS 逻辑白写 -
name值为空或含空格 → 后端收不到参数，或 URL 编码出错
移动端软键盘「搜索」按钮不生效？确保 form 存在且 input 有 name
Android 和 iOS 的软键盘能否显示「搜索」文字（而非「前往」「下一步」），取决于两个硬性条件：父级存在 form 元素，且 input 有 name 属性。缺一不可。
验证方法：在真机上打开页面，点击输入框，看软键盘右下角按钮文字。如果是「搜索」，说明配置正确；如果是「前往」，大概率是 name 缺失或 form 被移除了。
额外注意：
- Vue/React 等框架中动态渲染
form时，确保 DOM 结构完整，避免因条件渲染导致form标签未挂载 - 某些 UI 库（如 Ant Design）的
Search组件内部已封装好form，但若手动替换成原生input，就容易丢掉这层保障 - 即使不用表单提交，也建议保留
form包裹——它对可访问性（如屏幕阅读器识别搜索意图）和移动端体验都是刚需
type="search" + form + name 这个最小组合，后续所有「修复」都是在对抗浏览器本意。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
