WebReference.com - Part 2 of Chapter 6 from Dynamic HTML: The Definitive Reference, 2nd Edition. From O'Reilly (6/8).
Dynamic HTML: The Definitive Reference, 2E. Chapter 6: Scripting Events
Understanding Keyboard Event Data
If you examine the Events module of the DOM Level 2 recommendation, you may notice that keyboard events are nowhere to be found. As the W3C working group discovered, keyboard events in a Unicode world are tricky things to mold into an acceptable standard. But keyboard events in one form or another have been implemented in browsers since Netscape 4 and IE 4. Even though the Version 6 browsers carry forward the concepts from earlier days, the drafts of future W3C DOM Level 3 Events module indicate that keyboard event processing may take on new syntax in the future. In the meantime, we have "old-fashioned" keyboard events, with processing that is not always straightforward due to differences in event object details across browser versions.
The most important data related to a keyboard event is the identity of either the physical key being activated or the character generated by that key. These are not the same things. Every key has a numeric code associated with it. For example, a U.S. English keyboard assigns the number 65 to the key labeled A. That same key, however, can produce at least two different characters (A and a) on every U.S. computer, and even more characters on operating systems like the Macintosh (where the
Option-Shift modifier keys let that A key generate even more characters).
It so happens that the code "65" is also the ASCII and Unicode value of the uppercase A letter (this isn't a coincidence as much as it reflects the English-centric basis of early computing). The character codes for the A and a characters are 65 and 97, respectively. For some scripting tasks, the character code is important--such as whether the character is a numeral, regardless of whether the user pressed a top row keyboard key or a numeric keypad key; for other tasks, the key pressed is important--such as whether the user pressed the
PageDown key (which doesn't have a character associated with it).
Complicating the issue is that the IE event object has only one property value that conveys a code for a keyboard event (
event.keyCode). IE 5/Mac and Netscape 6 have a second property (
charCode) that conveys additional event information. To expose both the key and character codes, even with only one property, the browsers let the different keyboard events deliver different information. To read the key code, use only the
onkeyup events; use the
onkeypress event to read the character code.
You must still reconcile the event object property differences among the browsers to work with keyboard events. The key code for the
onkeyup events is available from the
keyChar property of the IE and Netscape 6 event objects. For the
onkeypress event's character code, use the
keyCode property for IE and
charCode property for Netscape 6. IE 5/Mac provides the same character code data for both properties of an
To see how these different events and properties expose codes to scripts, Example 6-1 dynamically displays as many keyboard-related event object properties as the browser supports (see Figure 6-2). In the course of processing each event type, the event listener functions display the
keyCode properties for all browsers. If a browser also supports the
charCode property, its values appear in the table.
You can witness interesting characteristics of the
onkeyup events when you use modifier keys. For example, if you type an uppercase A by pressing and holding the Shift key before typing the A key, you see that the
onkeydown event fires, and that the keycode for the Shift key (16) appears in the
keyCode property. But when you then press the A key, a new event object comes on the scene, with its own
keyChar property value.
Note that this is not how your scripts detect whether a modifier key is pressed during a keyboard or other event. The event object in both models has Boolean properties--
shiftKey--that your character key event handler can inspect. If the
keyChar property of an
onkeydown event indicates the C key, and if the event object's
ctrlKey value is true, the user has typed Ctrl-C.
Example 6-1 Keyboard events and codes
Figure 6-2 shows some sample output for Example 6-1.
Figure 6-2 Viewing keyboard event data
Regardless of the operating system you use, you should try Example 6-1 on at least two different browsers. This way you can see how the three events stuff values into event object properties in different event models.
Created: September 9, 2002
Revised: September 9, 2002