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

Answer 1

您可以使用 CSS 伪类

:placeholder-shown

根据输入条件设置要隐藏的元素的样式。

https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown

因此，在这个演示中，我添加了一些 css 规则，当占位符仍显示时（因此当输入仍未填充文本时），这些规则将隐藏按钮。

在这个演示中，我付出了一些努力，以尽可能最好的方式设计它，但有一些警告。主要问题是使用

span

来模拟实际上应该是

button

的内容，而不是出于可访问性问题！

但我想遵循 https://bulma.io/documentation/form/general/ 上显示的指南，该指南使用 icons 的布局。我尝试过使用按钮，但它们看起来很丑。因此，请考虑到这个细节，并花时间解决这个问题。

在此处查看有关该主题的更多信息：https://www.boia.org/blog/accessibility-tips-using-the-div-and-span-elements#:~:text=In%20general%2C% 20你%20应该%20避免，带有%20%20HTML%20tabindex%20属性。

旁注：我知道 SO 不是帮助台，但有时我认为值得花时间看看是否可以为自己的目的解决某些问题，如果不共享就会浪费

//when page was loaded
document.addEventListener('DOMContentLoaded', ()=>{
  
  //add a click event handler to the #clearButton,
  document.getElementById('clearButton')
    .addEventListener('click', ()=>{
      //that will clear the value of the #search text input
      document.getElementById('search').value = '';
    });
    
  //add a click event handler to the #filterButton
  document.getElementById('filterButton')
    .addEventListener('click', ()=>{
      //that will just log something on console
      console.log('filter occurred!');
    });
    
});

.field{
  margin: 2em;
}

#search:placeholder-shown + #filterButton {
  display: none;
}

#search:placeholder-shown ~ #clearButton {
  display: none;
}

#clearButton,
#filterButton
{
  pointer-events: auto;
  cursor: pointer;
}

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="field">
  <div class="control has-icons-left has-icons-right">
    <input id="search" class="input is-normal is-rounded" type="text" placeholder="Search...">
    <span id="filterButton" class="icon is-small is-right">
      <i class="fa-solid fa-filter"></i>
    </span>    
    <span id="clearButton" class="icon is-small is-left">
      <i class="fas fa-times"></i>
    </span>
  </div>  
</div>

Answer 2

您可以将 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>