In Javascript, how can I tell if a user presses two keys simultaneously?

Question

In Javascript, how can I determine if a user will press two keys simultaneously?

For example, I drew a circle in the middle of the screen. I want to move it while the user holds the up and right arrow, while the user holds the right arrow. This part works easily. If the user holds the up and right arrows, I want to move the circle diagonally, up and to the right.

This doesn't seem to be possible when handling the main Javascript events, but, of course, someone figured out how to work / hack / improve.

Answer 1

Here is what you need to do conceptually (I think this is called pseudocode):

Start with something like this:

var PIXEL_DELTA = 10; // Distance to move in pixels var leftPressed = 0, upPressed = 0, downPressed = 0, rightPressed = 0; 

Then, in each keydown event keydown check if the left , up , etc. key is pressed, and rotate its variable from 0 to PIXEL_DELTA .

In each keyup event keyup run the same test and return the correct variable back to 0 .

Then in your moving code (real code): (This code is adapted from the Crescent Fresh awesome example):

 function move() { var dot = document.getElementById('dot'), deltaX = rightPressed - leftPressed, deltaY = downPressed - upPressed; if(deltaX) { dot.style.left = (parseInt(dot.style.left, 10) || 0) + deltaX + 'px'; } if (deltaY) { dot.style.top = (parseInt(dot.style.top, 10) || 0) + deltaY + 'px'; } } 

The browser will (should) fire a separate keydown / keyup for each key, even if they are "pressed" simultaneously.

Working example

Crescent Fresh has compiled a complete JSBin example . Be sure to visit the editable version to play with the code.

Answer 2

Javascript has onkeydown and onkeyup events. You can just play the cue ball in the left arrow, and the other shoot up arrow. On the keyboard, return the corresponding bit back.

 var leftPressed, upPressed, rightPressed, downPressed; var milli = 100; window.addEventListener('onkeydown', function(e) { switch(e.keycode) { case 37: //left leftPressed = true; case 38: //up upPressed = true; case 39: //right rightPressed = true; case 40: //down downPressed = true; default: break; } }); window.addEventListener('onkeyup', function(e) { switch(e.keycode) { case 37: //left leftPressed = false; case 38: //up upPressed = false; case 39: //right rightPressed = false; case 40: //down downPressed = false; default: break; } }); function moveCircle() { if(leftPressed && !rightPressed) { // move left } if(rightPressed && !leftPressed) { // move right } if(upPressed && !downPressed) { // move up } if(downPressed && !upPressed) { // move down } } setInterval(moveCircle, milli); 

Answer 3

Perhaps you can do this by tracking the keydown and keyup events for each key, and you will know if two keys will be held at the same time.

Pseudo-code example:

 var keydown = {}; function onkeydown(event) { keydown[event.key] = true; } function onkeyup(event) { keydown[event.key] = false; } // in some function at some other places if (keydown['up'] && keydown['right']) { move_diagonal('up', 'right'); } elseif (keydown['up'] && keydown['left']) { move_diagonal('up', 'left'); } elseif .. blah blah 

Answer 4

Javascript keyboard events fire when a key is pressed and pressed, but does not contain additional key mask information to determine whether other keys are pressed at the same time.