Bulma CSS，输入搜索文本字段中的清除按钮

Answer 1

您可以将 bulma css 类

is-hidden

添加到图标，然后添加输入元素的

onInput

，删除该类以使其可见。或者，如果用户删除所有输入，

add

类会再次隐藏它。

const inputElement = document.querySelector('input');
const inputIcon = document.querySelector('i');

inputElement.addEventListener('input', (e) => {
    if (e.target.value.length > 0) {
        inputIcon.classList.remove('is-hidden');
    } else {
        inputIcon.classList.add('is-hidden');
    }
});

html, body { height: 100vh; }

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">

 <div class="field">
  <p class="control has-icons-left has-icons-right">
    <input class="input is-normal is-rounded" type="text" placeholder="Search...">
    <span class="icon is-small is-left">
      <i class="fa-solid fa-filter is-hidden">:D</i>
    </span>
  </p>
</div>