创建带有清除功能的搜索输入框：JavaScript 实现-html教程-PHP中文网

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

心靈之曲

发布： 2025-08-31 23:53:01

原创

385人浏览过

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

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

HTML 结构

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

<body>
  <input type="text" id="search-input">
  <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 来实现清除功能和图标的显示/隐藏逻辑。

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

纳米搜索

纳米搜索：360推出的新一代AI搜索引擎

查看详情

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>
  <input type="text" id="search-input">
  <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，在主流浏览器中都有良好的兼容性。