type="search"能触发原生清除按钮，因浏览器仅对该类型且聚焦、value非空时自动注入×按钮；它不在DOM中暴露，无法用CSS强制显示或JS绑定click，需监听search事件捕获清除动作。
直接用 type="search" 是最省事的方案，但只在 Chrome、Edge、Safari 15.4+、Firefox 110+ 有效；Firefox 旧版或需统一行为时，必须手写按钮 + JS 控制。
为什么 type="search" 能出清空按钮，但你加了却没显示
浏览器只对 type="search" 的 <input> 注入原生 × 按钮，且满足两个条件才可见：输入框已聚焦 + value 非空。不是写了就出，也不是靠 CSS 强行“显示”出来的。
- 别用
type="text"+::-webkit-search-cancel-button，它完全不生效 -
appearance: none或all: unset会直接移除按钮，不是隐藏 - 移动端 iOS Safari 可能延迟渲染 —— 页面首次加载后未交互过的
type="search"输入框，焦点一上来 × 按钮可能卡住不出现；可提前触发一次input.focus()再input.blur()激活
input[type="search"]::-webkit-search-cancel-button 能做什么、不能做什么
这个伪元素仅在 WebKit 内核（Chrome/Edge/Safari）下起作用，Firefox 完全无视。它只能改外观，不能绑定事件、不能控制逻辑。
- 可用
background换 SVG 图标，但得同步加padding-right避免文字被遮挡 - 别用
display: none隐藏 —— 某些 Chrome 版本会导致聚焦异常；opacity: 0或visibility: hidden更稳妥 - 它不响应
click，监听不到“用户点了 ×”，只能靠input或search事件感知值变空 -
search事件比input更合适放清空后逻辑：它在点击 × 或按 Enter 时都触发，且保证value已清空
手写清空按钮的 DOM 结构和显隐逻辑怎么写才稳
要兼容老浏览器、绕过 UA 行为限制、或确保无障碍支持，就得手动加 <button type="button">。结构、定位、显隐时机三者缺一不可。
立即学习“前端免费学习笔记（深入）”；
- HTML 必须是
<input>和<button>同级且 button 紧跟 input 后，例如：<div class="search-wrap"><input id="q"><button type="button" id="clear"></button></div> - CSS 父容器设
position: relative，button 用position: absolute定位，input 加padding-right预留空间 - 显隐别依赖
:focus或:blur—— 移动端软键盘收起时blur常丢失；改用监听input事件，根据input.value.length > 0切opacity或visibility - 按钮必须设
type="button"，否则放在<form>里点一下可能意外触发表单提交
清空后焦点和事件链怎么接上才不翻车
清空只是第一步，后续交互断链才是高频翻车点：用户清空后没法立刻继续输、搜索逻辑没触发、受控组件状态不同步。
- 清空后立刻调
input.focus()，尤其移动端，否则软键盘不会自动弹起 - 别只监听按钮
click，还要监听input事件 —— 粘贴、拖入、语音输入等也会让值变空，这时按钮该隐藏，但没人点它 - 手动清空后务必触发
input.dispatchEvent(new Event("input", { bubbles: true }))，否则 React/Vue 等框架的受控组件无法响应 - 如果用了
search事件，别在里面再写input.value = ""—— 浏览器已经做了，重复赋值可能引发双触发
最易被忽略的是：原生 × 按钮点击后，浏览器只清 value、不触发业务逻辑、也不保证焦点停留；而手写按钮若没补 input 事件派发，框架里输入框看起来清了，实际 state 还是旧值。
