Detecting two keyboard keys being down at the same time

Question

I tried with this code to detect two keyboard arrows being simultaneously pressed:

document.addEventListener('keydown', event => {

    if (event.keyCode === 38) {
        console.log('up Arrow')
    }

    if (event.keyCode === 39) {
        console.log('right Arrow')
    }

})

But it doesn't work, however hard I try to press them at exactly the same time.

How can I cleanly fix this and detect when both keys are down ?

Possible duplicate of [Detecting combination keypresses (Control, Alt, Shift)?](https://stackoverflow.com/questions/37557990/detecting-combination-keypresses-control-alt-shift) — vahdet, Dec 21 '18 at 09:20
This linked QA doesn't seem relevant for the current question. Please check a little more when voting to close. — Denys Séguret, Dec 21 '18 at 09:23
How would a single value (`event.keyCode`) simultaneously be equal to both 38 and 39? — OrangeDog, Dec 21 '18 at 11:28

score 6 · Accepted Answer · answered Dec 21 '18 at 09:20

There's only one keyCode per event. You have to track the keys going down, and up:

// if you keep both up and down keys down, you'll get a message
let downKeys = {}; // the set of keys currently down
document.addEventListener('keydown', event => {
    downKeys[event.keyCode] = true;
    if (downKeys[38] && downKeys[40]) {
       console.log("both down!");
    }
});
document.addEventListener('keyup', event => {
    downKeys[event.keyCode] = false;
});

(you have to go full page to test this snippet)

score 1 · Answer 2 · answered Dec 21 '18 at 09:21

Here I use 2 flags to check if you are holding the keys.

If both flags are true then it means that you are holding both keys. So, you can perform anything inside the condition.

let holdKeyUp = false;
let holdKeyRight = false;

document.addEventListener('keydown', event => {

    if (event.keyCode === 38) {
        holdKeyUp = true;
    }

    if (event.keyCode === 39) {
        holdKeyRight = true;
    }
    
    if (holdKeyUp && holdKeyRight) {
        console.log("Both keys are pressed.");
    }

})

document.addEventListener('keyup', event => {

    if (event.keyCode === 38) {
        holdKeyUp = false;
    }

    if (event.keyCode === 39) {
        holdKeyRight = false;
    }

})

Detecting two keyboard keys being down at the same time

2 Answers2