核心是“按需显示+安全清空”：按钮仅在输入框有内容且获焦点时显示；必须设type="button"防意外提交；清空用inputel.value=''而非reset()；显隐由input事件驱动，配合绝对定位精准控制。
在 H5 中为 input 添加清除按钮，核心是“按需显示 + 安全清空”。按钮只在输入框有内容且获得焦点时出现，点击后清空值但不触发表单提交，这是用户体验和功能稳定的关键。
清除按钮必须用 type="button"
如果按钮放在 form 内部，又没明确设置 type="button"，浏览器会默认当作 submit 按钮处理。一旦点击，整个表单可能意外提交或页面刷新。正确写法是：
<button type="button" id="clearBtn">×</button>- 绝对不要用
<input type="submit">或未声明 type 的 button - 清空操作只需赋值：
inputEl.value = ''，切勿调用form.reset()，它会重置所有字段
显隐逻辑靠 input 事件驱动，不是 focus/blur
监听 input 事件比 focus/blur 更精准：只要用户输入、粘贴、删除任意字符，都能实时响应。value 长度一变，按钮就同步显示或隐藏。
- 当
inputEl.value.length > 0时，让按钮 visible（例如clearBtn.style.display = 'inline-block'） - 否则设为
'none' - 避免用 class 切换控制显隐——CSS 控制虽轻量，但无法可靠响应动态状态；JS 主动控制更直接可控
按钮定位推荐绝对定位 + 父容器 relative
把 input 和按钮包进一个 <div class="input-wrapper">，父容器设 <code>position: relative，按钮设 position: absolute，右对齐、垂直居中。
- CSS 示例：
right: 8px; top: 50%; transform: translateY(-50%); - 按钮初始加
display: none，由 JS 控制显隐 - 不要用 margin 负值强行拉位置——响应式下容易错位，尤其在不同宽度设备上
type="search" 可启用原生清空按钮（仅限部分浏览器）
如果你接受兼容性限制（Chrome/Safari 支持，Firefox 不支持），可直接用：
<input type="search" id="searchInput" placeholder="搜索">- 通过
::-webkit-search-cancel-button伪元素定制样式（如 SVG 图标、尺寸、颜色） - 注意：该按钮点击时会触发
search事件，不是 click，需监听对应事件来补业务逻辑
