Javascript keydown function does not register two keys at once

Question

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

As you can see from the fragment below, if you click in the fragment window and press the P key or the command key (OSX - works only in safari, I think), then the flash animation will be added by 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>

Run codeHide result

If I change it so that the if statement if (e.which == 91 && e.which == 80)does not start the animation anymore.

I'm trying to make the flash animation fire when I press the + P command buttons

Answer 1

This statement will always evaluate the value false:

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

keydown .

, command , meta, @RobbyCornelissen .

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

, , command, . , , , , . ​​, , 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 */
}

Answer 2

metaKey.

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

Hide result

Answer 3

.

// 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;
    }
});

Answer 4

, event.ctrlKey.

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>

Hide result

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

Answer 5

.

mac , event.metaKey bool, return true if command key is pressed, . event.ctrlKey Windows. .

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>

Hide result

"keydown" "keyup" , , , . : event.shiftKey event.ctrlKey event.altKey event.metaKey . DOM 3, Macintosh Option event.altKey event.metaKey. , event.metaKey undefined IE. , , , . Macintosh IE, event.ctrlKey . Netscape 4 , event.modifiers.