This chapter is from the book
This chapter is from the book
This chapter is from the book
Using Keyboard Events
Prior to the release of Netscape 4.0, JavaScript programs couldn't detect keyboard actions—just mouse actions. This made it difficult to create some types of programs in JavaScript. For example, games were difficult to play using Go Left and Go Right buttons.
Thankfully, JavaScript 1.2 and later can 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 may 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, the event.which property stores the ASCII character code for the key that was pressed. In Internet Explorer, event.keyCode serves the same purpose.
NOTE
ASCII (American Standard Code for Information Interchange) is the standard numeric code used by most computers to represent characters. It assigns the numbers 0–128 to various characters—for example, the capital letters A through Z are ASCII values 65 to 90.
Displaying Typed Characters
If 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 Netscape's event.which property to a character and stores it in the key variable:
Key = String.fromCharCode(event.which);
Since Internet Explorer and Netscape 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 in the status line:
function DisplayKey(e) {
if (e.keyCode) keycode=e.keyCode;
else keycode=e.which;
character=String.fromCharCode(keycode);
window.status += 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 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 window.status property, which displays it in the browser's status line. Listing 10.1 shows a complete example using this function.
Listing 10.1 Displaying typed characters
<html>
<head>
<title>Displaying Keypresses</title>
<script language="javascript" type="text/javascript">
function DisplayKey(e) {
if (e.keyCode) keycode=e.keyCode;
else keycode=e.which;
character=String.fromCharCode(keycode);
window.status += character;
}
</script>
</head>
<body onKeyPress="DisplayKey(event);">
<h1>Displaying Typed Characters</h1>
<p>This document includes a simple script that displays the keys
you type in the status line. Type a few keys and try it. </p>
</body>
</html>
When you load this example into either Netscape or Internet Explorer, you can type and see the characters you've typed in the status line. Figure 10.1 shows this example in action in Netscape.
){kind=link}
Figure 10.1. Netscape displays the keypress example.