| Although the onkeydown, onkeyup, and onkeypress event handlers allow you to detect when a key is pressed, they don't tell you which key was actually pressed. To find that out, you'll need to use the charCode event property for Mozilla and Opera browsers or keyCode event property for Internet Explorer and Safari (Figure 15.3 and 15.4). Both of these return a numeric value for the key pressed. You can then use that code to determine the actual key pressed. A list of all the code numbers and their associated characters are provided on this book's Web site (webbedenvironments.com/css_dhtml_ajax). Figure 15.3. The general syntax for detecting the character code in Mozilla and Opera. 
Figure 15.4. The general syntax for detecting the character code in Internet Explorer and Safari. 
In this example (Figure 15.5), pressing any key will report that key's code number. I've gone ahead and set up an array to hold the first three characters (A, B, and C) but you can add the rest by consulting the book's Web site. Figure 15.5. The numeric code for the key that the user pressed is displayed in an alert message. 
To find which key was pressed: | | 1. | var keyChar = new Array(); keyChar[65] = 'A';
If you need to be able to quickly translate the character code into the actual character, you will need to set up an array that associates the number (used as the array position) with the character (Code 15.2).
Code 15.2. The event object's keyCode property is used to find the code for the key that the user pressed.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Detecting which Key was Pressed</title> <script type="text/javascript"> var keyChar = new Array(); keyChar[65] = 'A'; keyChar[66] = 'B'; keyChar[67] = 'C'; function initPage() { window.document.onkeydown=findKey; } function findKey(evt) { var evt = (evt) ? evt : ((window.event) ?event : null); if (evt.type == 'keydown') { if (keyChar[evt.keyCode]) alert (keyChar[evt.keyCode] + ' = ' + evt.keyCode); else alert ('Character Code = ' + evt.keyCode); }} </script> </head> <body onload="initPage();"> <h1>Press any key to find its character code!</h1> <br /> </body></html>
|
| 2. | function initPage() {...}
Add the function initPage() to your code and bind a keyDown event to an object.
In this example, I wanted to detect whenever a key is pressed with the page loaded, so I used window.document. However, you could also bind the event to a form input field to detect key presses only there.
| | | 3. | function findKey(evt) {...}
Add the function findKey() to your code.
This code first uses the event equalizer discussed in Chapter 12 ("Passing Events to a Function") to allow Internet Explorer and W3C-compliant browsers to play together:
var evt = (evt) ? evt : ((window.event) ? window.event : null);
It then uses either evt.charCode if the browser being used is Firefox (or any Mozillatype browser) or evt.keyCode for Internet Explorer and (oddly) Safari to identify the key that was pressed by its numeric value (see this book's Web site for more information).
For this example, I simply added an alert to report the character value if there is no entry for that code in the array.
| 4. | onload="initPage();"
Add an onload event handler in the <body> tag to trigger the initPage() function created in Step 1. This sets up the events for the page.
|
 Tip
Should I Use onkeydown, onkeyup, or onkeypress? Although the onkeypress and onkeyup event handlers also detect when a key is pressed, onkeydown gives more consistently reliable results between browsers for character detection. |
|
