Inside Technique : Key Manager : Examining the Code

The framework works by examining an author-defined key registry. This registry associates a particular key with an action. Each action can require a set of additional arguments. For example, a link action also needs the link to navigate to. The registry works as follows:

// initialize the registry
var keyRegistry = new Object

// Each key is an entry in the object.
// All keys should be specified uppercase (input is case insensitive)

keyRegistry["U"] = new Array("Input", "Form1", "UserName")
keyRegistry["A"] = new Array("Input", "Form1", "Address")
keyRegistry["T"] = new Array("Bookmark", "Top")
keyRegistry["N"] = new Array("Link", "page2.htm")

Notice that each registered key is associated with an array. The first entry specifies the action. The action also determines how many additional parameters should be specified. The table below describes the built-in actions and the arguments:

Action	Arguments	Description
Input	Form Name, Input Name	Sets the focus to the specified input control
Bookmark	Bookmark Name	Navigates to the specifies bookmark. This requires a corresponding bookmark on the page (eg., <A NAME="top">)
Link	URL	Navigates to a new page.

The next step is to hook up the event handlers. To receive global events in Netscape, you must use the captureEvent method. In Internet Explorer, all standard events automatically bubble. Therefore, we need to write a small script that detects if you are in Netscape to first capture the event:

// Test if captureEvents method exists
NS4 = (document.captureEvents) 
if (NS4) 
  document.captureEvents(Event.KEYPRESS)
document.onkeypress = doAccessKeys

Now you are ready to examine the doAccessKeys() function. This function is called whenever any key is pressed in the document. In Netscape, when the event is fired, an argument representing the event object is passed in. In Internet Explorer, the event object is exposed through the window object. To resolve this difference, when the event fires in Netscape, we copy the event parameter to an event object. In addition, we map the Netscape which and target properties to the Internet Explorer keyCode and srcElement properties. The keyCode (which) property represents the ASCII value of the pressed key, and the srcElement (target) is the element that first receives the event. We are using the srcElement to determine when the user is within an input control. When within an input control, we do not want to check the key registry.

Below is the complete function:

    function doAccessKeys(ev) {
      if (NS4) { // Map event object
        event = ev
        event.keyCode = ev.which
        event.srcElement = ev.target
      }
      if (event==null) event = ev
      var key = String.fromCharCode(event.keyCode).toUpperCase()
      var entry = keyRegistry[key]
      // If valid entry and not within an input control
      if ((entry!=null) && (event.srcElement.type==null)) {
        switch (entry[0].toLowerCase()) {
          case "input":
            document.forms[entry[1]].elements[entry[2]].focus()
            break;
          case "bookmark":
            document.location.hash = entry[1]
            break;
          case "link":
            window.location = entry[1]
            break;
        }
        // Do not let browser process key
        return false
      }
    }

When examining the code, notice the switch statement. This is used to determine the appropriate action for the specified key. You can add new key actions by adding additional case conditions to the switch. To access the additional parameters about the action, you examine the entry array (entry[1] represents the second argument, arrays are 0-based). Below is a demo form. Typing "U" puts you in the User name input box, typing "A" puts you in the address input box, "T" takes you to the top of the page, "P" to the first page of this article, and "H" back to our home page.

When you are within the input boxes, notice that the registered keys no longer have an action. Instead, they are correctly typed in the input control. The work-around would be to make sure the registered keys require an appropriate modifier. However, as we discussed in the beginning of this article, that approach did not work in Netscape. Either way, the key registry is especially useful on pages that do not have input. It is very easy to define keys that make it easy to navigate through the site (eg., H to always take you home, and so on).

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.