Javascript: Keydown Event: “Up” arrow key preventing further arrow-key Keydown events? (answered: keyboard ghosting)

Question

I've found a lot of related questions (here and elsewhere), but haven't found this one specifically.

I'm trying to listen for keydown events for the arrow keys (37-40), however when using the arrow keys in a certain order, subsequent arrow do not generate "keydown" events.

Example: http://blog.pothoven.net/2008/05/keydown-vs-keypress-in-javascript.html

At that page, click in the "type here ->" box.
Press and hold right arrow key: table updates to keycode 39
While continuing to hold right arrow key, press and hold up arrow key: table updates to 38
While continuing to hold right and up arrow keys, press and hold left arrow key: table does not update

However, if I do the same thing but using down arrow key instead of up arrow key then it works as expected.

Additionally, if I use the keypad instead of the arrow keys it works as expected.

I am preventing the normal operation of the keydown event (both by returning false in the event listener, and by calling preventDefault() ), but the behavior persists.

I thought it might be my keyboard, but it happens on a laptop as well as a friend's machine.

Does anyone have any insight as to what is going? Or some good ideas on workarounds?

[edit] Here's an example of what I mean. I realize this may not work on all browsers, but I just threw this together on my laptop to demonstrate what is happening for me (on chrome on w7 and also chrome & safari on mac os 10.6.8)

<html>
<body>
<script>

var keysDown = {};
addEventListener("keydown", function(e) {
    keysDown[e.keyCode] = true;
    document.getElementById('latestKeydown').value=e.keyCode;
}, false);

addEventListener("keyup",function(e){
    delete keysDown[e.keyCode];
}, false);

var loop = function(){
    document.getElementById('upinput').value=keysDown[38];
    document.getElementById('downinput').value=keysDown[40];
    document.getElementById('leftinput').value=keysDown[37];
    document.getElementById('rightinput').value=keysDown[39];
}

setInterval(loop,1);

</script>
Up: <input id="upinput" type=text size=10><br />
Down: <input id="downinput" type=text size=10><br />
Left: <input id="leftinput" type=text size=10><br />
Right: <input id="rightinput" type=text size=10><br />
Recent Keydown: <input id="latestKeydown" type=text size=10><br />

</body>
</html>

Again, the issue is: If I hold down A, then S, then D, then F, then G, you can see the "Recent Keydown" updating every single time I begin to hold a new key.

However, if I hold down right arrow, then up arrow, then left arrow, I do not see "Recent Keydown" updating for the left arrow key.

"...the PC might not understand it due to the way keyboards are wired" o.O — Derek 朕會功夫
PS: Your While continuing to hold right and up arrow keys, press and hold left arrow key in my computer, it changes. It is because keyDown will detect every single key downs and fire the function every single time. — Derek 朕會功夫
@Derek If you have a gaming keyboard this may work as expected. If not, this varies from keyboard to keyboard and some groups of keys can't be pressed together because of a limitation on the circuit of the keyboards. — Ricardo Souza

Brett Zamir Brett Zamir · Accepted Answer · 2012-04-22T06:04:47

I can't speak on authority on this, but according to https://stackoverflow.com/a/4177260/562209 , unless you are working with simultaneous press of a modifier key(s) and a non-modifier key, regarding a multiple key press "the PC might not understand it due to the way keyboards are wired".

Javascript: Keydown Event: “Up” arrow key preventing further arrow-key Keydown events? (answered: keyboard ghosting)

1 Answers