Question

68

Detecting Arrow key press in IE via javascript/jQuery

rated 0 times [ 75] [ 7] / answers: 1 / hits: 21758 / 15 Years ago, sun, february 7, 2010, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

devonw

Add To Favorites

Follow

Total Points: 311

Total Questions: 116

Total Answers: 111

Location: Senegal

Member since Fri, Aug 21, 2020

4 Years ago

devonw questions

1 How to set up Vue 3 parent component to emit event to child component

Thu, Apr 21, 22, 00:00, 2 Years ago

1 How to update item quantity in the shopping cart using React Redux

Wed, Jul 21, 21, 00:00, 3 Years ago

1 TypeError: request.getHeader is not a function

Wed, Jul 21, 21, 00:00, 3 Years ago

1 Updating one of the Formik initial values with state resets all other values

Thu, Feb 25, 21, 00:00, 3 Years ago

1 PM2 - Incorrect memory usage reading & possible memory leak with Node.js application

Wed, Dec 25, 19, 00:00, 5 Years ago

View All

answered 15 Years ago skylerselenem · Accepted Answer

From the jQuery keypress documentation (the last paragraph of the introductory text):

Note that keydown and keyup provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase a will be reported as 65 by keydown and keyup, but as 97 by keypress. 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>