0
638
ViewsCómo detectar dos caracteres (teclas) presionadas al mismo tiempo
Una distinción importante es que es más fácil saber si se presionan cntrl y z al mismo tiempo, pero no es tan sencillo detectar si z y x se presionan al mismo tiempo. ¿Cuál es la mejor manera de detectar cuándo se presionan varios caracteres al mismo tiempo?
2 answers
Answer question0
Este ejemplo utiliza detectores de eventos para realizar un seguimiento de un objeto que contiene todas las teclas que se presionan actualmente.
Podemos usar este objeto para verificar si se presionan ciertas teclas. Esto significa que podemos detectar tantas pulsaciones simultáneas de teclas como permita el teclado de un usuario.
Es importante destacar que le permitirá detectar cuándo se presionan varios caracteres al mismo tiempo.
const keysPressed = {}; document.addEventListener('keydown', (event) => { if (!event.repeat) keysPressed[event.key] = true; //You can also include event.repeat as a condition in your cases if you wish an event to only occur once each trigger. //You can also include Object.keys(keysPressed).length === 2 (for example) if you only wish the case to be valid if just two keys are pressed. //Finally, instead of event.key === 'x' you can write keysPressed['x']. This would replace both non-default cases in the example. The result is that the event will continue firing if another key is pressed. switch (true) { //You use true here because we are using logic to determine each case case event.key === 'x' && keysPressed['z']: case event.key === 'z' && keysPressed['x']: console.log('Z and X pressed!'); break; default: break; } }); document.addEventListener('keyup', (event) => { if (!event.repeat) delete keysPressed[event.key]; });0
Simplemente estoy usando una matriz como almacenamiento para todas las teclas que se presionan. Esta matriz se limpia a un estado vacío cuando se sueltan las teclas.
En el detector de eventos keydown, puede enlazar la función con la lógica que desee implementar. Lea la matriz de keys para verificar todas las teclas presionadas actualmente.
const keys = [] document.addEventListener('keydown', e => { !event.repeat && keys.push(e.key) doSomethingWithKeys(keys) }) document.addEventListener('keyup', e => { keys.splice(0, keys.length) }) function doSomethingWithKeys(keys) { console.log('keys pressed:', keys.join('+')) } 