The Keyboard
| Working with the keyboard is much like working with the mousethe difficulty is in handling the different event models. There are only three keystroke events. Here they are, in the order in which they occur, and what they do:
As discussed in Chapter 6, when you're handling alphanumeric keys, you should use the onkeypress event. When you're handling nonalphanumeric keys (such as arrow keys), use onkeydown and/or onkeyup . The reason for this is that in the onkeydown and onkeyup events, you get key codes (corresponding to the key's location in the keyboard) and modifier keys (such as the Shift key) that haven't been applied to the key you're reading, and you have to check properties such as event.shiftKey yourself (see Table 15.1) to determine whether a character should be capitalized. In the onkeypress event, you get the actual character code (an ASCII/Unicode code corresponding to the character as it appears on the screen), which holds an uppercase or lowercase character as appropriate. To handle nonprinting keys such as arrow keys, you use the key codes you get in the onkeydown and onkeyup events. The key code, which you can read in the keyCode property in the onkeydown and onkeyup events, holds a code for the key corresponding to its location in the keyboard. Be aware, however, that the key code varies by operating system and machine type (for instance, PC versus Mac). So how do you find key codes? The easiest technique is just to write a short script that displays the key code when you press a key. (For example, here's a text field that will display key codes in an alert box in both the Internet Explorer and the Netscape Navigator when you enter text: <INPUT TYPE="TEXT" ONKEYDOWN="alert(event.keyCode)"> .) Then you just press the keys for which you want to know the key codes. Most key-handling JavaScript code uses the onkeypress event and character codes. Note, however, that the character codes (and key codes) you get are just numbersyou still have to translate them into characters . We saw an example in Chapter 6 that did exactly that (Listing 06-17.html on the web site)that is, enabled users to just type; then what they typed was inserted into a text field when we handled the document object's onkeypress event (make sure the document has the focus when you're using this exampleclick it if necessary): <HTML> <HEAD> <TITLE>Reading Keys</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- document.onkeypress = keyPress var instring = "" function keyPress(e) { if(navigator.appName == "Netscape") { if(parseInt(navigator.appVersion) == 4) { instring += unescape("%" + e.which.toString(16)) document.form1.text1.value = instring } if(parseInt(navigator.appVersion) > 4) { instring += unescape("%" + e.charCode.toString(16)) document.form1.text1.value = instring } } if (navigator.appName == "Microsoft Internet Explorer") { instring += String.fromCharCode(window.event.keyCode) document.form1.text1.value = instring } } // --> </SCRIPT> </HEAD> <BODY> <H1>Reading Keys Directly (Type some text!)</H1> <BR> <FORM NAME="form1"> <INPUT NAME="text1" TYPE="TEXT" SIZE="20"> </FORM> </BODY> </HTML> You can see the results of this code in Figure 15.4. Figure 15.4. Reading keys in the Netscape Navigator. What if you want to cancel an event such as a keystroke? Here's an example that does exactly that; if you try to enter text into the text field in this example, nothing will appear (you can get the details on the preventDefault method, available in NS6+ only, and the returnValue property in Tables 15.6 and 15.8 at the end of this chapter): (Listing 15-03.html on the web site)<HTML> <HEAD> <TITLE> Canceling Keystrokes </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function cancelKey(e) { if(navigator.appName == "Netscape"){ e.preventDefault() } if (navigator.appName == "Microsoft Internet Explorer") { event.returnValue = false } return false } // --> </SCRIPT> </HEAD> <BODY> <H1>Canceling Keystrokes</H1> <FORM> <INPUT TYPE="TEXT" ONKEYPRESS="return cancelKey(event)"> </FORM> </BODY> </HTML> Tip Note that you're free to change a typed key by changing the keyCode and charCode properties in an event handler. Next I'll turn to a topic near and dear to many JavaScript programmers: working with images.  |
