Digamos que tengo un botón, como este:
let btn = document.createElement("button"); btn.style = "position: fixed; top: 0; left: 0; visibility: visible;"; btn.innerText = 'Click me!'; document.body.appendChild(btn); btn.onclick = function() { btn.innerText = 'Clicked'; }; document.addEventListener("keydown", function(event) { if (event.code === 'KeyU') { btn.style.visibility = btn.style.visibility == "hidden" ? "visible" : "hidden"; } });¿Cómo podría hacer que la visibilidad solo cambie cuando no esté escribiendo en algún tipo de cuadro de texto o barra de búsqueda?
Como mencionó @Bravo en los comentarios de esta pregunta, puede leer event.target para detectar qué elemento estaba enfocado cuando el usuario presionó la tecla.
event.target contiene una referencia al elemento que estaba enfocado. https://developer.mozilla.org/en-US/docs/Web/API/Event/target . Aquí hay un ejemplo en el que solo cambiará la visibilidad si la tecla no se presionó en un área de texto.
let btn = document.createElement("button"); btn.style = "position: fixed; float: left; top: 0; left: 0; visibility: visible;"; btn.innerText = 'Click me!'; document.body.appendChild(btn); btn.onclick = function() { btn.innerText = 'Clicked'; }; document.addEventListener("keydown", function(event) { if (event.code === 'KeyK' && event.target.tagName !== 'textarea') { btn.style.visibility = btn.style.visibility == "hidden" ? "visible" : "hidden"; } });