admin管理员组

文章数量:1416631

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: .html

  1. At that page, click in the "type here ->" box.
  2. Press and hold right arrow key: table updates to keycode 39
  3. While continuing to hold right arrow key, press and hold up arrow key: table updates to 38
  4. 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.

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/2008/05/keydown-vs-keypress-in-javascript.html

  1. At that page, click in the "type here ->" box.
  2. Press and hold right arrow key: table updates to keycode 39
  3. While continuing to hold right arrow key, press and hold up arrow key: table updates to 38
  4. 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.

  • javascript
  • html
  • keyboard
  • keydown
  • onkeydown
Share Improve this question edited Apr 22, 2012 at 14:25 ElleryTheJones asked Apr 22, 2012 at 5:45 ElleryTheJonesElleryTheJones 931 silver badge6 bronze badges 3
  • "...the PC might not understand it due to the way keyboards are wired" o.O – Derek 朕會功夫 Commented Apr 22, 2012 at 6:06
  • PS: Your While continuing to hold right and up arrow keys, press and hold left arrow key in my puter, it changes. It is because keyDown will detect every single key downs and fire the function every single time. – Derek 朕會功夫 Commented Apr 22, 2012 at 6:08
  • 1 @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 Commented Apr 22, 2012 at 15:06
Add a ment  | 

1 Answer 1

Reset to default 4

I can't speak on authority on this, but according to https://stackoverflow./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".

本文标签：

版权声明：本文标题：html - Javascript: Keydown Event: &quot;Up&quot; arrow key preventing further arrow-key Keydown events? (answered: keybo 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745256514a2650135.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。