关闭 -webikit-search-cancel-button 上 input-“search” 的下拉列表 click-解网

问：

我有一个带有 type=“search” 的输入框，下面是一个选项列表，单击输入框时会显示在下拉列表中。我设法让它工作。
但是，我现在遇到的问题是：每当单击输入框中的“X”（search-cancel-button）时，输入框中的输入文本都会被删除，但下拉列表不会消失。我该如何解决这个问题？

以下是我的代码：

.form .formtextbox {
  position: relative;
  display: inline-block;
  width: 100%;
}

.form .formtextbox .options {
  display: none;
  position: absolute;
  background-color: var(--white);
  min-width: 100%;
  box-shadow: 0px 2px 7px 0px #0000001F;
  padding: 12px 16px;
  z-index: 1;
}

.form .formtextbox:focus-within .options {
  display: block;
}

<form method="get" action="">
  <fieldset class="form">
    <div class="formtextbox">
      <input title="search_form_title" type="search" placeholder="Search" autocomplete="off">
      <div class="options">
        <ul unselectable="on">
          <li>apple</li>
          <li>banana</li>
          <li>pineapple</li>
          <li>strawberry</li>
        </ul>
      </div>
    </div>
    <div class="formbutton">
      <input type="submit" hidden />
    </div>
  </fieldset>
</form>

JavaScript HTML CSS 输入

一种方法是使用一点 JavaScript。我所做的是添加一个函数，该函数侦听按钮单击事件，然后隐藏下拉选项。该按钮不调度单击事件，而是调度事件。我们可以监听相同的内容，并在发生时隐藏下拉选项。此外，我还添加了 input 和 options 元素以在 Javascript 中引用它们。您可以很好地使用其他方式。像这样：XXinputids

document.getElementById('search-input').addEventListener('input', function() {
  var options = document.getElementById('options-container');
  if (this.value.length === 0) {
    options.style.display = 'none';
  } else {
    options.style.display = 'block';
  }
});

.form .formtextbox {
  position: relative;
  display: inline-block;
  width: 100%;
}

.form .formtextbox .options {
  display: none;
  position: absolute;
  background-color: var(--white);
  min-width: 100%;
  box-shadow: 0px 2px 7px 0px #0000001F;
  padding: 12px 16px;
  z-index: 1;
}

.form .formtextbox:focus-within .options {
  display: block;
}

<form method="get" action="">
  <fieldset class="form">
    <div class="formtextbox">
      <input id="search-input" title="search_form_title" type="search" placeholder="Search" autocomplete="off">
      <div id="options-container" class="options">
        <ul unselectable="on">
          <li>apple</li>
          <li>banana</li>
          <li>pineapple</li>
          <li>strawberry</li>
        </ul>
      </div>
    </div>
    <div class="formbutton">
      <input type="submit" hidden />
    </div>
  </fieldset>
</form>

上一个：即使我已经定义了函数，我也收到“AttributeError：模块'django.views'没有属性'my_form'”

下一个：我想更改输入[范围]上的刻度线的颜色

关闭 -webikit-search-cancel-button 上 input-“search” 的下拉列表 click

close dropdown for input-"search" on -webikit-search-cancel-button click

评论