Inside Technique : Key Manager
By Scott Isaacs

In this article we demonstrate how to create a cross-browser key manager. Using the key manager, you can register a key with a particular action. When the key is pressed, the action occurs.

The key manager is currently tied directly to an individual key. In ideal circumstances you would need to type a modifier such as the ALT key and the key itself. This allows the key manager to function even when the user is typing into an input element.

This was basically our original plan. We were going to emulate Internet Explorer 4.0's support of the HTML 4.0 AccessKey attribute in Netscape Navigator 4.0. The AccessKey attribute allows you to define keyboard shortcuts to the input controls on your page. On Windows, these shortcuts are evaluated when the ALT key followed by the specified character are specified.

Looking at Netscape Navigator 4.0's object model, they support a keypress event that fires whenever a key is pressed in the document. To all their events, they also pass an event object that exposes information related to the event. For the keypress event you have access to the ASCII value of the pressed key, any keyboard modifiers (ALT, SHIFT, etc.), and the programmable element on the page that first received the event. By examining the keyboard modifiers and the key pressed, we planned to emulate the AccessKey attribute using JavaScript. However, in our tests, the modifiers property in Netscape does not correctly expose the whether the ALT key is pressed (tested all keyboard event using Navigator 4.04 for Windows 95).

Rather than give up, we came up with a generic key manager that can be used in both browsers. The key manager automatically jumps to a bookmark or input control or navigates to a new page whenever a registered key is pressed. The key manager is designed to be easily extended with new actions. Since no modifier is used with the depressed key, this approach only works well when the user is not in an input control. When within an input control, the key manager disables itself. This prevents the user from navigating as they try and type into the control.

Before we go into the code, you can see the key manager in action by typing the "T" key to quickly navigate to the top of this article or type "N" to navigate to the next page in this article. Next we take you through the fairly simple code used to create this example.

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