type="search" 自带清除按钮默认不显示，需用户输入内容后才出现；若未显示，需检查是否设置了 readonly/disabled、CSS 重置（如 appearance: none）、Safari 的非空 value 要求等。

input type="search" 自带清除按钮为什么没显示？

多数浏览器（Chrome、Edge、Safari）对 type="search" 输入框原生支持清除按钮，但默认不显示——除非用户开始输入内容。如果你写了 <input type="search"> 却看不到 × 按钮，不是代码错了，是还没触发显示条件。

• 确保没有设置 readonly 或 disabled，否则清除按钮被禁用
• 部分 CSS 重置（如 appearance: none 或 ::-webkit-search-cancel-button { display: none; }）会隐藏它，检查开发者工具的 computed styles
• Safari 需要同时设置 type="search" 和非空 value 或用户已输入，才会渲染按钮

手动实现清除按钮：HTML + 原生 JS 最简方案

想在任意 type="text" 或 type="email" 上加清除按钮，不用框架也能做。关键是把按钮放在输入框右侧，并用 JS 清空值 + 控制显隐。

<div class="input-with-clear">
  <input type="text" id="myInput" placeholder="请输入">
  <button type="button" class="clear-btn">×</button>
</div>

• 用 position: relative 包裹容器，position: absolute 定位按钮到右端
• 监听 input 事件：值为空时 hide 按钮，非空时 show
• 点击按钮后调用 inputEl.value = ''，再触发 inputEl.dispatchEvent(new Event('input'))，确保绑定的监听器能响应

清除按钮点击后焦点丢失怎么办？

直接清空 value 后，输入框会失去焦点——用户得再点一次才能继续输入。这不是 bug，是浏览器默认行为，需主动恢复。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 点击清除按钮后，立刻执行 inputEl.focus()
• 如果页面有防抖或自动搜索逻辑（比如监听 input 发请求），清空后应取消待发请求，避免发空字符串查询
• 移动端要注意：iOS Safari 点击清除按钮可能触发两次 input 事件，建议用 setTimeout(() => {}, 0) 延迟清空，避开事件冲突

兼容性与无障碍注意事项

手写清除按钮容易忽略可访问性。屏幕阅读器不会自动识别 × 按钮的作用，键盘用户也无法仅用 Tab 进入操作。

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

• 给清除按钮加上 aria-label="清除输入内容"，并设 tabindex="0"
• 用 role="button" 明确语义，避免只靠 <span> 实现
• IE11 不支持 type="search" 的清除按钮，必须走手动方案；而 Firefox 原生不支持该按钮，无论 type 都得手写

清除按钮看似简单，但显隐逻辑、焦点管理、可访问性、跨浏览器差异，每处都容易漏掉一两个细节。尤其当多个输入框共用同一套清除逻辑时，别忘了用 event.stopPropagation() 防止事件冒泡干扰父组件。