Estoy trabajando en atajos de teclado para una aplicación web y necesito verificar si presionar una tecla debe activar el atajo o si es solo el usuario que escribe y, por lo tanto, no debe activar el atajo.
Por ejemplo, un patrón común es usar las teclas / o s para abrir la barra de búsqueda global. Obviamente, esto no debería abrir la barra de búsqueda si el usuario está escribiendo en otra entrada.
La lógica ideal sería algo como esto: al presionar una tecla, verifique el elemento enfocado actualmente. Si el elemento acepta la entrada del teclado (se puede escribir), entonces no haga nada. Si el elemento no acepta la entrada de teclado, ejecute el atajo.
Tenga en cuenta que verificar la capacidad de enfoque no es suficiente porque los enlaces y los botones se pueden enfocar, pero no acepte la entrada del teclado (en la forma en que me refiero aquí).
Esto es lo que tengo hasta ahora:
function acceptsKeyboardInput(element) { return ( element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.isContentEditable ); }¿Este enfoque detecta todos los casos o hay una mejor manera de saber si un elemento HTML acepta la entrada del teclado?
¿Todos los atajos tendrán más de una tecla? Si es así, puede escuchar la input y evitar que se ejecute un acceso directo con un valor booleano.
var is_input = false window.addEventListener('keydown', function (e) { console.log(is_input) is_input = false }) window.addEventListener('input', function (e) { is_input = e.constructor.name == 'InputEvent' }) La salida esperada para /s mientras se puede escribir sería true or false (dependiendo del valor anterior de is_input ) en / keypress de tecla, luego true en s keypress de tecla y todas las teclas siguientes.
La salida esperada para /s mientras no se pueda escribir sería true or false (dependiendo del valor anterior de is_input ) en / keypress de tecla y luego false en s keypress de tecla y todas las teclas siguientes