Using the Keypress Event

Both version 4 browsers have exposed many new client events to scripting. In DHTML Lab, we have discussed and used these new events in relation to the techniques we have developed. For example, in Column 3, Dynamic Images, we discussed the click and mousedown events; in Columns 6 and 7, Drag & Drop, we based our routines on the mousedown, mousemove and mouseup events, and looked at the IE4-specific onselectstart event.

In Column 3, we also provided a table of event properties for the two browsers. It is reproduced as an addendum to the present discussion as well.

For a complete overview of events exposed by version 4 browsers, see Doc JavaScript's event columns.

In the present article, we will concentrate on capturing and using the keypress event.

Live Examples: All pages in this article have live examples for version 4 browsers. The keys that are assigned tasks are listed in the left column, as is the relevant part of the script (switch) that contains the statements executed upon keypress.

Capturing the keypress

Navigator 4 documents an onkeypress handler for the document, Image, Link and Textarea objects. Although not documented, the window object can also be given an onkeypress handler.

Explorer 4 exposes the keypress event for all elements and the document object. The window object cannot process keypresses, although the BODY tag can.

More often than not, our page will be scripted to process a keypress regardless of the element-in-focus. For this, we need to use the cross-browser document object. In Navigator, we need to capture the keypress event for the document object, before defining the event handler.

Therefore, if we want all keypresses to be handled by a function called doKey(), we need the following code:

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
IE4 = (document.all);
NS4 = (document.layers);

if (NS4) document.captureEvents(Event.KEYPRESS);
document.onkeypress = doKey;
//-->
</SCRIPT>

Now, let's look at how doKey() processes the keypress.