title: How to stop the keypress even listener when I am type in a form in JavaScript
body: <p>I am try to change the visibility state of a specific div when the user press &quot;s&quot; or any specific key. Below code works just fine however, it toggles the visibility state even when I am typing something in the form or input field. Any suggestions on how I can write a exception or something to stop the function from executing when user is type in a form.</p>
  <p>And also how do I toggle the visibility state from visible to hidden when the user press the same key again?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var searchBar = document.querySelector(".search-pop-up");
  
  document.addEventListener("keypress", function (event) {
    toggleSearchBar(event.key);
  });
  
  function toggleSearchBar(key) {
    if (key === "s") {
      searchBar.style.visibility = "visible";
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Thank you so much in advance. Have a good day!</p>