清空按钮仅在且value非空时由chrome/safari/edge原生渲染，firefox不支持；需避免preventdefault()干扰原生清空，推荐用js+自定义按钮统一控制显隐与无障碍。
搜索框右侧自动显示清空按钮的触发条件
清空按钮不是靠手动加 <button></button> 实现的，而是浏览器对 <input type="search"> 的原生支持。只有当输入框类型为 search，且有用户输入内容时，Chrome、Safari、Edge 才会自动渲染右上角的 × 按钮。
常见错误是用 text 类型 + 手动写按钮，结果样式不一致、焦点行为异常、移动端适配差。别这么干。
- 必须用
type="search"，不能用type="text"伪装 - 按钮出现的前提是
value非空 —— 空值时不会显示 - Firefox 不支持该原生按钮（需 JS 补充），但其他主流浏览器都 OK
清除输入后如何让按钮立即消失
原生按钮点击后，浏览器会清空 value 并隐藏按钮，但前提是没阻止默认行为。如果你绑了 onclick 或 oninput 并调用了 event.preventDefault()，按钮就卡住不消失。
正确做法是：只监听 search 事件（而非 click），并在里面做业务逻辑，不干扰原生清空流程。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
search事件在用户点击 × 或按 Enter 时触发，input事件在每次键入时触发 —— 清空逻辑放search更稳妥 - 不要给 × 按钮单独绑定事件；它没有独立 DOM 节点，无法直接操作
- 如果需要清空后聚焦回输入框，用
inputEl.focus()，但别在search回调里调inputEl.value = ""—— 浏览器已经做了
自定义清空按钮样式与兼容 Firefox
Chrome/Safari 的 × 按钮可通过伪元素 ::-webkit-search-cancel-button 定制，但仅限 WebKit 内核。Firefox 完全不识别这个伪类，必须用 JS + 手动按钮兜底。
推荐方案：统一用 JS 控制显隐，放弃原生按钮，换为带 aria-label 的 <button type="button"></button> 放在输入框右侧。
- 用 CSS Flex 布局将
<input>和<button></button>包进<div role="search"> 容器 <li>按钮 <code>display: none初始隐藏，监听input事件，当input.value.length > 0时显示 - 按钮点击执行
input.value = ""+input.dispatchEvent(new Event("input"))，确保受控组件能响应 - 务必加
aria-label="Clear search"和tabindex="0"，否则无障碍失效 - 页面加载后，对搜索框执行一次
inputEl.focus()再立即inputEl.blur()（可加setTimeout延迟 1ms） - 避免在
DOMContentLoaded里直接 focus —— 此时键盘可能意外弹出，改用load或用户首次交互后初始化 - 若使用 React/Vue，确保 ref 绑定完成后再做上述操作，否则
focus()无效
移动端 Safari 的 focus 与清空按钮冲突问题
在 iOS Safari 中，type="search" 输入框获得焦点时，键盘弹出，但原生 × 按钮可能延迟渲染或点击无响应 —— 尤其在页面刚加载、输入框未被交互过时。
这不是 bug，是 Safari 对未“激活”输入框的懒渲染策略。解决方式不是 hack，而是提前触发一次 focus/blur。
