Menu
I'm trying to set up a menu that can be navigated via the arrow keys. I have this working fin in Firefox.
Trying to get it to work in IE8 and after a bit of struggle, found that it was because IE8 wouldn't register a keypress on the arrows. To test:
$(document).keypress(function (eh){
alert(eh.keyCode);
};
In Firefox, pressing any of the arrow keys would trigger an alert of 37, 38, 39 or 40.
In IE8, nothing. Any other key on the standard QWERTY keyboard would register, but not the arrow keys.
Is this an issue with my Javascript? A browser setting? A Windows setting?
448
To detect the arrow key when it is pressed, use onkeydown in JavaScript. The button has key code. As you know the left arrow key has the code 37. The up arrow key has the code 38 and right has the 39 and down has 40.
Using JavaScript In plain JavaScript, you can use the EventTarget. addEventListener() method to listen for keyup event. When it occurs, check the keyCode 's value to see if an Enter key is pressed.
The keypress event is fired when a key that produces a character value is pressed down. Examples of keys that produce a character value are alphabetic, numeric, and punctuation keys.
From the jQuery keypress documentation (the last paragraph of the introductory text):
Note that
keydownandkeyupprovide a code indicating which key is pressed, whilekeypressindicates which character was entered. For example, a lowercase "a" will be reported as 65 bykeydownandkeyup, but as 97 bykeypress. An uppercase "A" is reported as 97 by all events. Because of this distinction, when catching special keystrokes such as arrow keys,.keydown()or.keyup()is a better choice.
It even literally mentions about the arrow keys ;) Thus, you really need to hook on either the keydown or keyup events. Here's an SSCCE with keydown, just copy'n'paste'n'run it. No, you don't need to do a browser-compatible check on the event, this works in all browsers from IE6 up to with Firefox.
<!doctype html>
<html lang="en">
<head>
<title>SO question 2217553</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).keydown(function(event) {
switch (event.keyCode) {
case 37: alert('left'); break;
case 38: alert('up'); break;
case 39: alert('right'); break;
case 40: alert('down'); break;
}
});
</script>
</head>
<body>
<p>Press one of the arrow keys.</p>
</body>
</html>
Try this:
$(document).keydown(function (e) {
if(!e) {
e = window.event;
}
switch(e.keyCode) {
case 37:
goLeft();
break;
case 39:
goRight();
break;
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
