Javascript keydown function not registering two keys at once

Question

I have a simple function that registers when a key is pressed, then applies a CSS flash animation to an element.

As seen in the below snippet, if you click into the snippet window and press the P key or the command key (OSX - only works in safari I believe), then a flash animation will be added the the nav element.

window.onkeydown = function(e) {
  if (e.which == 91 || e.which == 80) {
    document.getElementById("nav").classList.add('flash');
    window.setTimeout(function() {
      document.getElementById("nav").classList.remove('flash');
    }, 100)
  }
}

.flash {
  animation: flash 0.5s 2 alternate ease-out;
}

@keyframes flash {
  to {
    background-color: orange;
  }
}

<nav id="nav">
  blahblahblah
</nav>

If i change it so that the if statement is if (e.which == 91 && e.which == 80) it no longer fires the animation.

I am trying to make it so that when the command+P buttons are pressed together, the flash animation fires

you could use if else . if(e.which==91){if(e.which==80) do this; } — Mahi, Oct 17 '16 at 06:11

score 4 · Accepted Answer · edited May 23 '17 at 12:16

This statement will always evaluate to false:

if (e.which == 91 && e.which == 80)

keydown event is triggered for one key only.

If you only considering the case where command is pressed with any other key, you can use meta property as @RobbyCornelissen suggested in his answer.

window.onkeydown = function(e) {
  if (e.which === 80 && e.metaKey) {
    console.log("Pressed");
  }
}

However, for a more generic case, like 3 buttons pressed simultaneously or two buttons pressed without command use this approach. You can store a map of call keys pressed at the moment and then use it to check if all the keys required are pressed at the moment. To create such map you can use this code borrowed from this answer:

var map = {}; // You could also use an array
onkeydown = onkeyup = function(e){
    e = e || event; // to deal with IE
    map[e.keyCode] = e.type == 'keydown';
    /* insert conditional here */
}

Thanks for the link to that answer! I scrolled down a bit and found the section where it says **Gotcha: "This key combo keeps activating even though I'm not pressing the keys"** and used that. But you pointed my in the right track with the part where you said it will always evaluate to false — , Oct 17 '16 at 06:27

Robby Cornelissen · Answer 2 · 2016-10-17T06:20:12.727

1

You need to check the event's metaKey property.

window.onkeydown = function(e) {
  if (e.which === 80 && e.metaKey) {
    console.log("Pressed");
  }
}

edited Oct 17 '16 at 06:20

answered Oct 17 '16 at 06:15

Robby Cornelissen

91,784
22
134
156

score 1 · Answer 3 · answered Oct 17 '16 at 06:17

This way any two or more keycode can be checked..

// create some object to save all pressed keys
var keys = {
    p: false,
    cmd: false
};

$(document.body).keydown(function(event) {
// save status of the button 'pressed' == 'true'
    if (event.keyCode == 80) {
        keys["p"] = true;
    } else if (event.keyCode == 91) {
        keys["cmd"] = true;
    }
    if (keys["p"] && keys["cmd"]) {
        // do anything else
    }
});

$(document.body).keyup(function(event) {
    // reset status of the button 'released' == 'false'
    if (event.keyCode == 80) {
        keys["p"] = false;
    } else if (event.keyCode == 91) {
        keys["cmd"] = false;
    }
});

score 0 · Answer 4 · answered Oct 17 '16 at 06:11

If you would like to detect control key, you can use event.ctrlKey property.

window.onkeydown = function(e) {
  if (e.which == 91 && e.ctrlKey) {
    document.getElementById("nav").classList.add('flash');
    window.setTimeout(function() {
      document.getElementById("nav").classList.remove('flash');
    }, 100)
  }
}

.flash {
  animation: flash 0.5s 2 alternate ease-out;
}

@keyframes flash {
  to {
    background-color: orange;
  }
}

<nav id="nav">
  blahblahblah
</nav>

Ref: http://www.w3schools.com/jsref/event_key_ctrlkey.asp

score 0 · Answer 5 · answered Oct 17 '16 at 06:37

You can check the solution at the following code pen link.

To get Command key of mac in key event, you can simply use event.metaKey bool which will return true if command key is pressed while pressing another key. This works similar to event.ctrlKey for windows users. For more details on the event you can visit the following link.

window.onkeydown = function(e) {
  if (e.keyCode == 80 && e.metaKey) {
   document.getElementById("nav").classList.add('flash');
    window.setTimeout(function() {
      document.getElementById("nav").classList.remove('flash');
    }, 100)
   }
}

.flash {
  animation: flash 0.5s 2 alternate ease-out;
}

@keyframes flash {
  to {
    background-color: orange;
  }
}

<nav id="nav">
  blahblahblah
</nav>

On keydown and keyup, the event objects also have flags that indicate which modifier keys were being pressed when the key was typed. These are: event.shiftKey event.ctrlKey event.altKey event.metaKey These all have true or false values. According to the DOM 3 standard, on the Macintosh, the Option key should activate event.altKey and the Command key should activate event.metaKey. These attributes seem to work correctly on all modern browsers tested, except event.metaKey is undefined in all versions IE. There is some freakishness in obsolete browsers that can probably be ignored these days. In Macintosh versions of IE, the Command key sets event.ctrlKey and the Control key does nothing. In Netscape 4, none of these attributes existed and the event.modifiers attribute needed to be used instead.

Javascript keydown function not registering two keys at once

5 Answers5