Javascript: Keydown Event: "Up" arrow key preventing further arrow-key Keydown events? (answered: keyboard ghosting)
html, javascript, keyboard, keydown, onkeydown
Solution
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".
Problem
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.