SeriousCoding.com

I had to add functionality for keyboard navigation to my latest project at work recently. It started out with the need to disable the browser’s postback when someone hits ENTER in a formular. Of course more had to be added once our usability guy realized that theoretically eliminates the need for a mouse. The following example is a bit more basic though and covers only what’s need to understand the concepts.

First of all we have to register the event on the document. Unfortunately keypressed isn’t supported on all browsers and keyup is a little too late to prevent all browser functions so we have to go with keydown.

1

$(document).keydown(function(event){

For cross-browser compatibility two properties of the event need to be checked: event.keyCode and event.which.

2

    var key = event.keyCode || event.which;

And the last thing you have to know is whether the focus is on a textbox or a textarea. Otherwise we can screw up the ability to edit text very easy if we work with ENTER, DELETE or BACKSPACE. The check is done by looking at event.target.type.

3

    if(event.target.type !== 'textarea'){

For the rest of the example, let’s say we have three buttons on our page, selected by jQuery, which get shown and hidden dynamically according to the context: one back button, $back, one forward button, $forward and one button to submit the form, $save.

4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

        //ENTER
        if (key === 13) {
            //The button has to be visible to be used.
            if ($save.is(':visible')) {  
                $save.click();  
            } else if ($forward.is(':visible')) {  
                $forward.click();
            }
            //Preventing any other action by the browser
            //even if no button is visible  
            return false;  
        }
        //Not in a textarea or textbox
        if (event.target.type !== 'text') {
            //BACKSPACE  
            if (key === 8) {
                //SHIFT is also pressed
                if (event.shiftKey) {
                    if ($forward.is(':visible')) {
                        $forward.click();
                    }
                } else {
                    if ($back.is(':visible')) {
                        $back.click();
                    }
                }
                return false;
            }
        }
    }
});

That’s it, our application’s enhanced with a few simple keyboard commands.

A little tip at the end: To make your code easier to write and understand here’s a handy object maps the real key codes of the most important special keys to easy to use constants. Just put it in front of the rest of your code.

var keyCode = {
  BACKSPACE: 8,
  CAPS_LOCK: 20,
  COMMA: 188,
  CONTROL: 17,
  DELETE: 46,
  DOWN: 40,
  END: 35,
  ENTER: 13,
  ESCAPE: 27,
  HOME: 36,
  INSERT: 45,
  LEFT: 37,
  NUMPAD_ADD: 107,
  NUMPAD_DECIMAL: 110,
  NUMPAD_DIVIDE: 111,
  NUMPAD_ENTER: 108,
  NUMPAD_MULTIPLY: 106,
  NUMPAD_SUBTRACT: 109,
  PAGE_DOWN: 34,
  PAGE_UP: 33,
  PERIOD: 190,
  RIGHT: 39,
  SHIFT: 16,
  SPACE: 32,
  TAB: 9,
  UP: 38  }