JavaScript 中的输入类型搜索清除事件

JavaScript 中的事件处理是实现丰富交互体验不可或缺的一部分。其中，输入类型搜索清除事件是常用的一种。当用户在一个输入框中输入文本时，输入框右侧通常会出现一个清除按钮，点击该按钮可以清除输入框内容。本文将介绍如何在 JavaScript 中实现输入类型搜索清除事件。

为输入框添加清除按钮

首先，我们需要为输入框添加一个清除按钮。HTML 代码如下：

<input type="text" id="search-input">
<span id="clear-btn">X</span>

其中，<input> 元素是输入框，<span> 元素是清除按钮。为了让按钮与输入框对齐，我们应该使用 CSS 来设置它们的样式。CSS 代码如下：

#search-input {
  border: 1px solid #ccc;
  padding: 5px;
}

#clear-btn {
  cursor: pointer;
  visibility: hidden;
  font-size: 20px;
  margin-left: -25px;
}

#search-input:focus + #clear-btn {
  visibility: visible;
}

其中，#search-input 是输入框的样式，#clear-btn 是清除按钮的样式。在默认情况下，按钮的可见性应该是隐藏的，只有当输入框获得焦点时才显示出来。为了实现这一点，我们使用了 CSS 的“相邻选择器”，当输入框获得焦点时，清除按钮会变为可见。

实现输入类型搜索清除事件

有了清除按钮，我们就可以开始实现输入类型搜索清除事件了。JavaScript 代码如下：

var input = document.getElementById('search-input');
var clearBtn = document.getElementById('clear-btn');

clearBtn.addEventListener('mousedown', function() {
  input.value = '';
});

input.addEventListener('input', function() {
  if (input.value) {
    clearBtn.style.visibility = 'visible';
  } else {
    clearBtn.style.visibility = 'hidden';
  }
});

我们使用了 DOM API 来获取输入框和清除按钮元素，并使用 addEventListener() 方法为清除按钮添加一个 mousedown 事件处理函数。当用户点击清除按钮时，我们只需要将输入框的值设置为空即可。

接下来，我们为输入框添加一个 input 事件处理函数。当用户在输入框中键入任何字符时，该函数就会被触发。我们检查输入框的值，如果它不为空，就显示清除按钮，否则就隐藏它。

总结

在本文中，我们介绍了如何在 JavaScript 中实现输入类型搜索清除事件。通过添加清除按钮和实现清除事件处理函数，用户可以轻松地清除输入框中的内容，提高了交互体验。