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

Question

我正在尝试制作一个即时搜索框。当用户开始在搜索框中输入内容时，它会触发一个javascript事件来隐藏博客文章（#home），而搜索结果将会显示出来（这部分脚本不包括在下面）。但是，在用户清除搜索框后，他们只看到空白页面，因为#home的display仍设置为none。

我怎样才能让JavaScript的检测用户清除提交输入在#search-input，并#home显示true一遍吗？

document.getElementById('search-input').oninput = function() { 
    document.getElementById('home').style.display = 'none'; 
}; 

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

感谢卡尔·爱德华兹的帮助！

下面是最终代码完美的作品：

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'; 
    } 
});