HTML5 中怎么使用 search 输入类型为搜索框添加内置的一键清空按钮-H5教程-PHP中文网

HTML5中type="search"的input元素在满足内容非空且获得焦点时，主流浏览器自动显示清空按钮；Firefox需通过appearance和伪元素启用；点击按钮自动清空并触发事件。

html5 中怎么使用 search 输入类型为搜索框添加内置的一键清空按钮

在 HTML5 中，使用 type="search" 的元素，浏览器会自动为其添加一个内置的一键清空按钮（通常显示为 × 或 ❌ 图标），前提是用户已输入内容且输入框获得焦点。

确保使用正确的 type 属性

这是最基础也是最关键的一步。必须将 input 的 type 显式设为 "search"：

<input type="search" name="q" placeholder="搜索...">

注意：不要用 text 或其他类型替代，否则清空按钮不会出现（Chrome、Safari、Edge 等主流浏览器均遵循此行为）。

清空按钮的触发条件

该按钮默认是“按需显示”的，需同时满足以下条件才会出现：

输入框内容不为空（即 value.length > 0）
输入框当前处于聚焦状态（focus）
浏览器支持该特性（现代 Chrome、Edge、Safari 均支持；Firefox 默认不显示，但可通过 CSS 启用）

兼容 Firefox 的处理（可选）

Firefox 默认不显示 search 类型的清空按钮，但可通过伪元素启用：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}
/* Firefox 需额外启用（需配合属性） */
input[type="search"] {
  appearance: textfield; /* 或 searchfield（部分版本） */
}

更稳妥的做法是添加 appearance: searchfield 并配合 WebKit 前缀，或直接使用 JavaScript + 自定义按钮作为降级方案。

样式与交互控制（如需定制）

可通过伪元素调整清空按钮外观（仅限 WebKit 内核）：

input[type="search"]::-webkit-search-cancel-button {
  appearance: none;
  width: 14px;
  height: 14px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12"><path d="M7.5 6l4.5-4.5L10.5 0 6 4.5 1.5 0 0 1.5 4.5 6 0 10.5l1.5 1.5L6 7.5l4.5 4.5 1.5-1.5z" fill="%23999"></path></svg>');
  cursor: pointer;
}

注意：清除按钮点击后，浏览器会自动清空 value 并触发 input 和 change 事件，无需额外监听逻辑。