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

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

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

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

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

<form action="/search" method="get">
  <input type="search" name="q" placeholder="请输入关键词">
  <button type="submit">搜索</button>
</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 + 自定义按钮覆盖实现显隐逻辑。