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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

回答：

您可以通过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>

回答：

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

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

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

以上是 如何在输入字段被清除时触发JavaScript事件？ 的全部内容， 来源链接： utcz.com/qa/259167.html

回到顶部