Section VI.6. Understanding Keyboard Event Data

VI.6. Understanding Keyboard Event Data

As the W3C DOM working group discovered, keyboard events in a Unicode world are tricky things to mold into an acceptable global standard. Thus, keyboard events weren't covered in DOM Level 2 and, as of this writing, are still in Working Draft state as a Level 3 module. But keyboard events in one form or another have been implemented in browsers since Netscape 4 and IE 4. The W3C DOM Level 3 Events module Working Draft adopts some existing terminology, but also adds new syntax that keyboard event processing may adopt 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 and 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 importantsuch 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 importantsuch 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). Mozilla, Safari, and IE/Mac have a second event object 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 keydown or keyup events; use the keypress event to read the character code.

You must still reconcile the event object property differences among the browsers to work with keyboard events (although some browsers implement both approaches). The key code for the keydown and keyup events is available from the keyCode property of the event objects in IE and other browsers. For the keypress event's character code, use the keyCode property for IE, Safari, and Opera and charCode property for Mozilla browsers. Safari and IE 5/Mac provide the same character code data for both the keyCode and charCode properties of an keypress event.

W3C DOM Event Futures

The W3C DOM Level 3 Events module Working Draft divides what we currently think of as keyboard events into two separate event categories: text and keyboard. A textinput event is roughly equivalent to a keypress event, and reveals the character (via the event.data property) derived from the keystroke (or other input method); a keyboard event is either of type keydown or keyup, and reveals information (via the event.keyIdentifier property) about the key that is physically activated by the user. As of late-2006, no mainstream browser implements these recommendations.

To see how these different events and properties expose codes to scripts, Example VI-2 dynamically displays as many keyboard- and character-related event object properties as the browser supports (see Figure VI-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 keydown and keyup events when you use modifier keys in some browsers (IE and Opera). For example, if you type an uppercase A by pressing and holding the Shift key before typing the A key, you see that the keydown 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 propertiesaltKey, ctrlKey, and shiftKeythat your character key event can inspect. If the keyChar property of a keydown event indicates the C key, and if the event object's ctrlKey value is TRue, the user has typed Ctrl-C.

Example VI-2. Keyboard events and codes

 <html> <head> <title>Keyboard Events and Codes</title> <style type="text/css"> body {font-family: Arial, sans-serif} h1 {text-align: right} td {text-align: center} </style> <script language="JavaScript" type="text/javascript" src="/books/2/570/1/html/2/eventsManager.js"> </script> <script language="JavaScript" type="text/javascript"> // array of table cell ids var tCells = ["downKey", "pressKey", "upKey", "downChar", "pressChar", "upChar", "keyTarget", "character"]; // clear table cells for each key down event function clearCells( ) {     for (var i = 0; i < tCells.length; i++) {         document.getElementById(tCells[i]).innerHTML = "&mdash;";     } } // display target node's node name function showTarget(evt) {     var node = (evt.target) ? evt.target : ((evt.srcElement) ?                evt.srcElement : null);     if (node) {         document.getElementById("keyTarget").innerHTML = node.nodeName;     } } // decipher key down codes function showDown(evt) {     clearCells( );     evt = (evt) ? evt : ((event) ? event : null);     if (evt) {         document.getElementById("downKey").innerHTML = evt.keyCode;         if (evt.charCode) {             document.getElementById("downChar").innerHTML = evt.charCode;         }         showTarget(evt);     } } // decipher key press codes function showPress(evt) {     evt = (evt) ? evt : ((event) ? event : null);     if (evt) {         document.getElementById("pressKey").innerHTML = evt.keyCode;         if (evt.charCode) {             document.getElementById("pressChar").innerHTML = evt.charCode;         }         showTarget(evt);         var charCode = (evt.charCode) ? evt.charCode : evt.keyCode;         // use String method to convert back to character         document.getElementById("character").innerHTML =             String.fromCharCode(charCode);     } } // decipher key up codes function showUp(evt) {     evt = (evt) ? evt : ((event) ? event : null);     if (evt) {         document.getElementById("upKey").innerHTML = evt.keyCode;         if (evt.charCode) {             document.getElementById("upChar").innerHTML = evt.charCode;         }         showTarget(evt);     } } // bind events to text box function setKeyboardEvents( ) {     addEvent(document.forms["myForm"].elements["entry"], "keydown", showDown, false);     addEvent(document.forms["myForm"].elements["entry"], "keypress", showPress, false);     addEvent(document.forms["myForm"].elements["entry"], "keyup", showUp, false); } // do event binding now that elements exist addOnLoadEvent(setKeyboardEvents); </script> </head> <body> <h1>Key and Character Codes vs. Event Types</h1> <hr> <p>Enter some text with uppercase and lowercase letters:<br> <form name="myForm" > <input type="text"  size="60"> </form> </p> <table border="2" cellpadding="5" cellspacing="5"> <caption>Keyboard Event Properties</caption> <tr><th>Data</th><th>keydown</th><th>keypress</th><th>keyup</th></tr> <tr><td>keyCode</td>     <td >&mdash;</td>     <td >&mdash;</td>     <td >&mdash;</td> </tr> <tr><td>charCode</td>     <td >&mdash;</td>     <td >&mdash;</td>     <td >&mdash;</td> </tr> <tr><td>Target</td>     <td  colspan="3">&mdash;</td> </tr> <tr><td>Character</td>     <td  colspan="3">&mdash;</td> </tr> </table> </body> </html> 

Figure VI-2 shows some sample output for Example VI-2.

Figure VI-2. Viewing keyboard event data

Regardless of the operating system you use, you should try Example VI-2 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.