最简方案是直接操作 DOM 元素的 value 属性，如 document.getElementById('searchInput').value = ''；type="search" 才触发原生清空按钮；React 中需更新 state 而非直接改 DOM；iOS Safari 清空后需 focus() + setSelectionRange(0, 0) 恢复光标。

点击按钮时清空 <input> 的值，最简方案

直接操作 DOM 元素的 value 属性是最可靠、兼容性最好的方式，不依赖框架或事件代理。

• 给 <input> 设置一个 id（如 id="searchInput"），方便精准获取
• 绑定按钮的 onclick 或用 addEventListener 监听点击
• 执行 document.getElementById('searchInput').value = ''

注意：不要用 innerHTML 或 textContent，它们对 <input> 无效；也不要用 reset() 表单方法——它只重置到初始 value 值，不是清空。

type="search" 输入框自带清空按钮的启用条件

浏览器原生支持的 × 清空按钮（在输入内容后右端出现）仅对 type="search" 有效，且需满足：

• 必须是 <input type="search">，写成 type="text" 或漏写 type 都不会触发
• 不能有 readonly 属性（disabled 也不显示）
• 部分旧版 Safari 需要加 appearance: none 才能稳定显示，但会同时去掉默认样式

这个按钮点击后自动清空 value 并触发 input 事件，无需额外监听。

立即学习“前端免费学习笔记（深入）”；

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

React 中清空受控 <input> 的典型错误

受控组件的值由 value prop 和 onChange 驱动，直接改 DOM 不生效。

• 错误做法：用 ref.current.value = '' —— 界面可能闪一下就恢复原值
• 正确做法：更新 state，例如 setSearchValue('')，让 React 重新渲染
• 如果用了 useRef 存储输入值（非受控），那才可以用 ref.current.value = ''，但需确保没同时绑定 value prop

混淆受控与非受控是 React 里最常见的清空失效原因。

移动端 iOS Safari 清空后光标消失的问题

在 iOS Safari 中，执行 input.value = '' 后，有时光标会留在末尾或消失，导致用户无法立即继续输入。

• 解决方案：清空后手动聚焦并设置光标位置为 0
• 代码示例：

  const input = document.getElementById('searchInput');
  input.value = '';
  input.focus();
  input.setSelectionRange(0, 0);

• 注意 setSelectionRange 必须在 focus() 之后调用，否则无效

这个细节在桌面端通常无感，但在 iOS 上几乎必现，容易被忽略。