Js Keyboard прослушивание

Question

моя цель в этом случае, когда u введите строку поиска, появится код ниже работает, но у меня есть проблема при вводе текста на другой вход, например, ввод комментария js listen и открытие строки поиска. возможно ли, когда im уже в другом поле ввода, поиск не появится и не покажется.

<style> 
#searchBar { display: none; -webkit-transition: width 2s; /* Safari */ transition: width 2s;} 
.search { width: 250px; height: 20px; } 
</style> 

<script> 
window.onload = function() { 
    var listen = /^[a-z0-9]+$/i; 
    var searchInput = document.getElementById('searchInput'); 
    var searchBar = document.getElementById('searchBar'); 

    if (window.addEventListener) 
     window.addEventListener('keyup', insertKey, false); 

    function insertKey(e) { 
     // Get the character from e.keyCode 
     var key = String.fromCharCode(e.keyCode).toLowerCase(); 

     // Match the character 
     if(key.match(listen)) { 

      // Change display: none; to display: block; 
      searchBar.style.display = "block"; 
      // Append every new character 
      searchInput.value += key; 
      // Focus on input 
      searchInput.focus(); 

      // Since you focused on the input you don't need to listen for keyup anymore. 
      window.removeEventListener('keyup', insertKey); 

      // I didn't tested with jQuery 
      // $('#searchBar').fadeIn(); 
      // $('#searchBar input').append(keys); 
      // $('#searchBar input').focus(); 
     } 
    } 
}; 
</script> 

Answer 1

При добавлении слушателя событий в window для keyup события, она будет срабатывать при keyup обнаруживается независимо от того, где оно происходит от. Вы недостаточно осведомлены о том, какие события вы слушаете.

Одним из решений является добавление слушателя событий непосредственно к input элементов, так что keyup от одного элемента не вызывает слушателя другого элемента:

document.getElementById("searchInput").addEventListener("keyup", searchInputKeyHandler); 
document.getElementById("commentInput").addEventListener("keyup", commentInputKeyHandler); 
// etc. 

Это работает, но это немного странно. Если все, что вы делаете, это прослушивание пользователем ввода текста в HTML-элементе input, то лучшим событием для прослушивания является input, который запускается всякий раз, когда элемент input изменил свое значение.

document.getElementById("searchInput").addEventListener("input", searchInputKeyHandler); 
document.getElementById("commentInput").addEventListener("input", commentInputKeyHandler); 
// etc. 

Некоторые элементы также могут прослушивать событие change; сделайте некоторые исследования и посмотрите, какое событие наиболее подходит для вашего случая использования.