Intento cambiar el estado de visibilidad de un div específico cuando el usuario presiona "s" o cualquier tecla específica. El siguiente código funciona bien, sin embargo, alterna el estado de visibilidad incluso cuando estoy escribiendo algo en el formulario o en el campo de entrada. Cualquier sugerencia sobre cómo puedo escribir una excepción o algo para evitar que la función se ejecute cuando el usuario escribe en un formulario.
Y también, ¿cómo cambio el estado de visibilidad de visible a oculto cuando el usuario presiona la misma tecla nuevamente?
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"; } }Muchas gracias de antemano. ¡Que tengas un buen día!
Podría intentar alternar la visibilidad en función del valor anterior del elemento. Puede asegurarse de que si su entrada es el elemento activo, entonces no debería alternar la visibilidad:
var searchBar = document.querySelector(".search-pop-up"); document.addEventListener("keypress", function (event) { toggleSearchBar(event.key); }); function toggleSearchBar(key) { if (document.activeElement != searchBar && key === "s") { searchBar.style.visibility = searchBar.style.visibility === "visible" ? "hidden" : "visible"; } } .search-pop-up { visibility: hidden; } body { height: 100%; width: 100%; } <input class="search-pop-up" /> <button>My button</button>Aquí hay un breve resumen sobre la solución. Primero, obtenga el nombre de etiqueta del elemento activo y luego verifique si es igual o no igual a cualquier nombre de etiqueta específico y luego ejecute la función a continuación.
Para alternar la visibilidad, configuré una declaración if para verificar valores específicos, por ejemplo, "visible", si es visible, la siguiente línea de código lo cambiará a "oculto" y viceversa.
var searchBar = document.querySelector(".search-pop-up"); document.addEventListener("keypress", function (event) { // Captures the current active element tagName var currentElement = document.activeElement.tagName; var currentElementLower = currentElement.toLowerCase(); // Checks if the current active not equal to "input" if (currentElementLower != "input") { toogleSearchBar(event.key); } else { return false; } }); // Toogle the visibility state function toogleSearchBar(key) { if (key === "s") { if (searchBar.style.visibility === "visible") { searchBar.style.visibility = "hidden"; } else { searchBar.style.visibility = "visible"; } } }Espero que ayude a alguien nuevo en JavaScript.
Intentaría agregar event.stopImmediatePropagation() en el teclado;
Alternativamente, puede devolver false para detener la propagación de eventos.
function onsubmit(event) { return false; }