清除输入字段时如何触发JavaScript事件？

Question

我正在尝试制作即时搜索框。当用户开始在搜索框中键入内容时，它会触发javascript事件以隐藏博客帖子（#home），并且将显示搜索结果（下面不包括此部分脚本）。但是，在用户清除搜索框后，他们只会看到一个空白页面，因为display的{​​{1}}仍设置为#home。

如何让JavaScript在none检测用户清除输入字段并再次#search-input显示#home？

true

Answer 1

您可以通过input事件侦听器执行此操作。要隐藏#home元素，请添加条件以检查输入是否具有值。如果没有，那么你隐藏它。要将其恢复原状，请执行相反的操作，但如果隐藏#home则仅 ：

const searchInput = document.getElementById('search-input');
const home = document.getElementById('home');

searchInput.addEventListener('input', function() {
    if (!this.value) {
        home.style.display = 'none';
    } else if (this.value && home.style.display === 'none') {
      home.style.display = 'block';
    }
});

<input id="search-input" type="text"/>

<div id="home">
  Sample Content
</div>

Answer 2

感谢Carl Edwards的帮助！

以下是完美运作的最终代码：

const searchInput = document.getElementById('search-input');
const home = document.getElementById('home');
const results = document.getElementById('results');

searchInput.addEventListener('input', function() {
    if (this.value) {
        home.style.display = 'none';
        results.style.display = 'inline';
    } else if (!this.value && home.style.display === 'none') {
      home.style.display = 'block';
      results.style.display = 'none';
    }
});