的清空按钮和回车提交功能必须依赖 包裹及 name 属性，脱离表单则按钮仅清空值不触发事件，回车无反应；需同时设置 enterkeyhint="search" 确保移动端显示搜索键。
直接用 <input type="search"> 就能获得自带清空按钮，不需要 JS 或额外 CSS——但必须放在 <form></form> 里、带 name 属性，否则按钮不生效、回车没反应、提交无参数。
为什么清空按钮点了没反应？
常见错误是把 <input type="search"> 单独写在页面上，没包进 <form></form>。清空按钮只在表单上下文中才触发 input 和 search 事件；脱离表单后，点击 × 只清空值，但不会通知 JS、也不触发任何回调。
- 确保它被
<form></form>包裹，哪怕你后续用 JS 拦截提交 - 必须设
name属性（如name="q"），否则浏览器不认为这是“可提交字段”，清空后也拿不到值 - 别对
::-webkit-search-cancel-button直接写display: none—— Safari 下可能让按钮完全失活，改用appearance: none+ 自定义图标更稳妥
回车键不触发搜索？先查这三处
不是 JS 写得不对，而是结构或事件绑定错了位置。回车提交是表单行为，不是输入框行为。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<input type="search">必须在<form></form>内，且form要监听submit事件，不是input监听keyup - JS 中必须调用
event.preventDefault()，否则页面刷新、搜索中断 - 如果用了
method="get"，但没设action，回车会跳到当前 URL 根路径（比如从/blog跳到/）——加action="/search"明确目标
移动端键盘不显示“搜索”按钮？type 和 enterkeyhint 都要写
仅靠 type="search" 在部分安卓 WebView 或旧版 iOS 上不够稳，软键盘仍显示“回车”。
- 必须同时写
<input type="search" enterkeyhint="search"> -
enterkeyhint是 HTML5 标准属性，Chrome、Safari、Edge 均支持，比inputmode更可靠 - 别用
inputmode="search"替代type—— 它只影响键盘类型（比如弹数字盘），不激活清空按钮或搜索语义
最容易被忽略的是：清空按钮和回车提交都依赖 <form></form> 的存在，而不是 JS 是否加载成功。哪怕你一个 JS 都不写，只要结构对，用户就能点 ×、按回车、看到 URL 变成 /search?q=xxx —— 这才是原生搜索框的底线能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
