为搜索输入文本框添加动态显示的清除按钮

修改后的HTML代码 #

先给输入框加个ID方便后续JS操作，再在control容器里新增右侧的清除按钮，初始状态隐藏：

<div class="field">
  <p class="control has-icons-left has-icons-right">
    <input id="search-input" class="input is-normal is-rounded" type="text" placeholder="Search...">
    <span class="icon is-small is-left">
      <i class="fa-solid fa-filter"></i>
    </span>
    <!-- 新增清除按钮 -->
    <button id="clear-btn" class="icon is-small is-right" style="display: none; border: none; background: transparent; cursor: pointer;">
      <i class="fa-solid fa-times"></i>
    </button>
  </p>
</div>

CSS优化（可选） #

给清除按钮加个hover变色效果，让交互更直观：

#clear-btn:hover i {
  color: #ff4444;
}

JavaScript逻辑 #

实现内容感知显示/隐藏按钮，以及清空输入框的功能：

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

// 监听输入框内容变化，控制按钮显示/隐藏
searchInput.addEventListener('input', () => {
  clearBtn.style.display = searchInput.value.trim() ? 'block' : 'none';
});

// 点击按钮清空输入框并隐藏按钮
clearBtn.addEventListener('click', () => {
  searchInput.value = '';
  clearBtn.style.display = 'none';
  searchInput.focus(); // 清空后自动聚焦输入框，提升体验
});

核心逻辑说明 #

• 输入框有内容时才显示清除按钮，无内容则自动隐藏
• 点击清除按钮会直接清空输入框内容，同时隐藏按钮并聚焦输入框
• 按钮样式和原有icon区域风格统一，不会破坏页面布局

内容的提问来源于stack exchange，提问作者res1