当前位置：首页 > 文章列表 > 文章 > 前端 > 带清除按钮的搜索框JS实现方法

带清除按钮的搜索框JS实现方法

2025-09-01 19:00:37 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

**带清除功能的搜索输入框 JS 实现方法：一步步教你打造用户友好的搜索体验** 想要提升网站的用户体验？一个带有清除功能的搜索输入框是必不可少的。本文将手把手教你使用 JavaScript 实现一个实用的搜索输入框，它不仅能监听输入框的 `keyup` 事件，还能通过清除按钮的 `click` 事件快速清空内容。更重要的是，我们还会根据输入框的值，动态控制一个图标的显示与隐藏，让你的搜索框更加直观易用。通过学习本文，你将掌握如何利用 HTML 结构（包括 `input`、`button` 和 `div`）和 JavaScript 代码，轻松实现这一功能，并了解样式定制、事件类型选择以及兼容性等方面的注意事项，让你的网站搜索功能更上一层楼。

创建带有清除功能的搜索输入框：JavaScript 实现

正如摘要所述，本文将指导你使用 JavaScript 实现一个带有清除功能的搜索输入框。我们将深入探讨如何监听输入框的 keyup 事件以及清除按钮的 click 事件，并根据输入框的值动态控制一个图标的显示与隐藏。

HTML 结构

首先，我们需要一个基本的 HTML 结构，包含一个输入框（input）、一个清除按钮（button），以及一个用于显示的图标（div）。

<body>
  &lt;input type=&quot;text&quot; id=&quot;search-input&quot;&gt;
  <button type="button" id="cancel">Cancel</button>
  <div id="icon" style="background-color: green; width: 50px; height: 50px; display: none;"></div>
</body>

在这个例子中，我们使用了一个 div 作为图标，并设置了初始样式 display: none;，使其默认隐藏。你可以根据自己的需求替换成其他图标元素，例如图片或字体图标。

JavaScript 实现

接下来，我们将使用 JavaScript 来实现清除功能和图标的显示/隐藏逻辑。

const input = document.getElementById("search-input");
const button = document.getElementById("cancel");
const icon = document.getElementById("icon");

input.addEventListener('keyup', changeIconDisplay);

button.addEventListener('click', () => {
  input.value = '';
  changeIconDisplay();
});

function changeIconDisplay() {
  if (input.value.trim() === "") {
    icon.style.display = "none";
  } else {
    icon.style.display = "flex";
  }
}

这段代码主要做了以下几件事情：

获取元素： 使用 document.getElementById() 获取输入框、按钮和图标的 DOM 元素。
监听 keyup 事件： 监听输入框的 keyup 事件，每次输入框内容发生变化时，都会触发 changeIconDisplay 函数。
监听 click 事件： 监听清除按钮的 click 事件。点击按钮后，首先将输入框的值设置为空字符串，然后调用 changeIconDisplay 函数，更新图标的显示状态。
changeIconDisplay 函数： 这个函数负责根据输入框的值来控制图标的显示与隐藏。它首先使用 input.value.trim() 去除输入框值的前后空格。如果输入框的值为空，则设置图标的 display 样式为 "none"，否则设置为 "flex"。

完整代码示例

将上面的 HTML 和 JavaScript 代码结合起来，就是一个完整的可运行示例：

<!DOCTYPE html>
<html>
<head>
  <title>带有清除功能的搜索输入框</title>
</head>
<body>
  &lt;input type=&quot;text&quot; id=&quot;search-input&quot;&gt;
  <button type="button" id="cancel">Cancel</button>
  <div id="icon" style="background-color: green; width: 50px; height: 50px; display: none;"></div>

  <script>
    const input = document.getElementById("search-input");
    const button = document.getElementById("cancel");
    const icon = document.getElementById("icon");

    input.addEventListener('keyup', changeIconDisplay);

    button.addEventListener('click', () => {
      input.value = '';
      changeIconDisplay();
    });

    function changeIconDisplay() {
      if (input.value.trim() === "") {
        icon.style.display = "none";
      } else {
        icon.style.display = "flex";
      }
    }
  </script>
</body>
</html>

将这段代码保存为 HTML 文件，然后在浏览器中打开，就可以看到效果了。

注意事项

样式定制： 可以根据自己的需要修改 HTML 中的样式，例如更改图标的颜色、大小、位置等。
事件类型： 除了 keyup 事件，还可以使用 input 事件来监听输入框内容的变化。 input 事件在每次输入框的值发生变化时都会触发，包括通过复制粘贴等方式修改输入框内容。
兼容性： 这段代码使用了标准的 JavaScript API，在主流浏览器中都有良好的兼容性。