如何在 HTML 输入文本字段中放置响应式清除按钮？

在 HTML 中，我们可以使用 <input> 元素来创建文本输入字段。如果你希望在输入字段中放置一个响应式清除按钮，可以使用以下两种方法：

方法一：在输入字段内部添加清除按钮

使用这种方法，我们可以在 <input> 元素中添加一个 <span> 元素，将清除按钮的图标放置在其中。然后使用 CSS 来设置按钮的样式和位置，使用 JavaScript 来控制按钮的显示和隐藏。

代码示例

<style>
  .input-wrapper {
    position: relative; /* 父元素设置为相对定位 */
  }
  .clear-button {
    position: absolute; /* 清除按钮设置为绝对定位 */
    top: 5px;
    right: 5px;
    cursor: pointer;
  }
</style>

<div class="input-wrapper">
  <input type="text" placeholder="请输入内容" />
  <span class="clear-button" onclick="clearInput()">×</span> <!-- 点击清除按钮触发 clearInput() 函数 -->
</div>

<script>
  function clearInput() {
    document.querySelector('input').value = ''; // 将输入框的值清空
    document.querySelector('.clear-button').style.display = 'none'; // 隐藏清除按钮
  }

  let input = document.querySelector('input');
  input.addEventListener('input', function() {
    if (input.value) {
      document.querySelector('.clear-button').style.display = 'block'; // 如果输入框有值，则显示清除按钮
    } else {
      document.querySelector('.clear-button').style.display = 'none'; // 如果输入框没值，则隐藏清除按钮
    }
  });
</script>

解释说明

1.首先，我们使用 CSS 将输入框和清除按钮的父元素设置为相对定位，这样清除按钮就可以相对于输入框进行定位。

2.然后，我们在输入框后面添加一个 <span> 元素，这个元素可以用来放置清除按钮的图标，并设置它的样式和位置。

3.接着，我们为清除按钮添加一个点击事件，在点击时调用 clearInput() 函数，将输入框的值清空，并将清除按钮隐藏起来。

4.最后，我们为输入框添加一个 input 事件监听器，每当输入框的值发生变化时都会触发，如果输入框有值，则显示清除按钮，如果输入框没值，则隐藏清除按钮。

方法二：使用 HTML5 新特性 input type="search"

HTML5 中的 <input> 元素提供了一种新的类型——type="search"，可以用来创建搜索框，并在搜索框右端自动添加一个清除按钮。

代码示例

<input type="search" placeholder="请输入内容" />

解释说明

这种方法非常简单，只需要将 <input> 元素的 type 属性设置为 "search"，浏览器就会自动在输入框的右端添加一个清除按钮。这个按钮的功能是清空输入框中的内容。如果你不需要手动控制清除按钮的显示和隐藏，这种方法就非常适合。

至此两种方法都已讲解完毕，可以根据自己的需求选择相应的方法。