|
|
Free Open Book
Sams Teach Yourself JavaScript in 24 Hours |
|
Using Keyboard EventsJavaScript can also detect keyboard actions. The main event handler for this purpose is onKeyPress, which occurs when a key is pressed and released, or held down. As with mouse buttons, you can detect the down and up parts of the keypress with the onKeyDown and onKeyUp event handlers. Of course, you might find it useful to know which key the user pressed. You can find this out with the event object, which is sent to your event handler when the event occurs. In Netscape and Firefox, the event.which property stores the ASCII character code for the key that was pressed. In Internet Explorer, event.keyCode serves the same purpose. By the Way ASCII (American Standard Code for Information Interchange) is the standard numeric code used by most computers to represent characters. It assigns the numbers 0128 to various charactersfor example, the capital letters A through Z are ASCII values 65 to 90. Displaying Typed CharactersIf you'd rather deal with actual characters than key codes, you can use the fromCharCode string method to convert them. This method converts a numeric ASCII code to its corresponding string character. For example, the following statement converts the event.which property to a character and stores it in the key variable: Key = String.fromCharCode(event.which); Because different browsers have different ways of returning the key code, displaying keys browser independently is a bit harder. However, you can create a script that displays keys for either browser. The following function will display each key as it is typed: function DisplayKey(e) {
// which key was pressed?
if (e.keyCode) keycode=e.keyCode;
else keycode=e.which;
character=String.fromCharCode(keycode);
// find the object for the destination paragraph
k = document.getElementById("keys");
// add the character to the paragraph
k.innerHTML += character;
}
The DisplayKey() function receives the event object from the event handler and stores it in the variable e. It checks whether the e.keyCode property exists, and stores it in the keycode variable if present. Otherwise, it assumes the browser is Netscape or Firefox and assigns keycode to the e.which property. The remaining lines of the function convert the key code to a character and add it to the paragraph in the document with the id attribute keys. Listing 9.3 shows a complete example using this function. By the Way The final lines in the DisplayKey() function use the getElementById() function and the innerHTML attribute to display the keys you type within a paragraph on the page. This technique is explained in Hour 13, "Using the W3C DOM." Listing 9.3. Displaying Typed Characters
When you load this example into either Netscape or Internet Explorer, you can type and see the characters you've typed appear in a paragraph of the document. Figure 9.2 shows this example in action in Firefox. Figure 9.2. Firefox displays the keypress example.
|
Main Menu |
| 500 Juegos Gratis | 500 Giochi Gratis | 500 Jeux Gratuits | 500 Jogos Gratis | 500 Kostenlose Spiele |
