使用 可创建语义明确、原生支持清空按钮、软键盘优化及历史记录的搜索框；必须设 name 属性（如 name="q"）以确保表单提交时传递搜索词；建议包裹在 中以支持回车/按钮提交及无障碍访问；移动端需避免 disabled/readonly、touch-action: none 等阻断聚焦；监听推荐 oninput 并配合防抖；清空按钮样式受限，可 appearance: none 后自定义实现。

用 <input type="search"> 就能创建语义明确、浏览器原生支持的搜索输入框。它不是简单换个 type，而是自带清空按钮、软键盘优化（比如 iOS 显示“搜索”键）、历史记录下拉等隐式能力。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

必须写 name 属性
哪怕你用 JavaScript 拦截提交，也要加 name="q" 或类似值。否则表单提交时这个字段不会被发送，后端收不到搜索词。
例如：<input type="search" name="q" placeholder="搜点啥">

建议包裹在 form 标签里
这样能自然触发回车提交、点击搜索按钮提交，也兼容无障碍读屏软件：

搜索

移动端聚焦要特别注意
iOS 上如果点击没反应或键盘闪退，检查：

• input 没有被设为 disabled 或 readonly
• 父容器没加 touch-action: none 或 user-select: none
• 页面没在聚焦瞬间触发滚动或重绘（可加 setTimeout(() => input.focus(), 0) 缓一帧）

事件监听选 oninput，不是 onkeyup
oninput 能捕获粘贴、语音输入、长按输入等所有内容变化；onkeyup 会漏掉很多场景。实时过滤或搜索建议务必配防抖（如 300ms），避免频繁请求。

清空按钮样式难统一？有取舍
WebKit 浏览器（Chrome/Safari）用 ::-webkit-search-cancel-button，旧 Edge 用 ::-ms-clear，但它们是 UA 控件，不能自由调色或缩放。
稳妥做法：用 appearance: none 隐藏原生按钮，再用 JS + 自定义按钮覆盖实现显隐逻辑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！