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.