12.7 Handling Key Events: onKeyPress, onKeyDown , and onKeyUp

As of JavaScript 1.2, keyboard actions, not just mouse actions, can be detected in JavaScript programs. This is useful, for example, in certain types of game programs where keyboard entry must be detected to determine the next action. The onKeyPress, onKeyDown , and onKeyUp event handlers are triggered when the user presses a key and releases it. The onKeyPress event is a combination of two actions: after you press down on the key, the event happens just at the point you release it. The other two key events happen as soon as you press a key down ( onKeyDown ) and then when you release it ( onKeyUp ). The onKeyDown and onKeyPress events keep firing continuously as long as the user keeps a key depressed, whereas the onKeyUp event fires once when the user releases the key. Some browsers may differ in the way they handle key events.

Example 12.19

 <html><head><title>Key Events</title></head> 1   <body bgcolor="yellow"  onKeyPress  =  "  2       if(  navigator.appName=='Netscape'  ) 3           alert('The key pressed:'+ event.which + 4              'ASCII'+  String.fromCharCode(event.which)  )         else 5          alert('The key pressed:'+  event.keyCode  +                'ASCII'+  String.fromCharCode(event.keyCode)  );">     <font face = "verdana">     <b>Press any key on your keyboard and see what happens!</b>     </body>     </html>

EXPLANATION

The body tag is assigned an onKeyPress event handler. If the user presses a key anywhere in the body of the document, the event is triggered, causing an alert method to appear and display the value of the key.
First we check to see if the browser being used is Netscape. Netscape and IE use different properties to describe the numeric value of the key being pressed.
The which property of the event object describes the numeric ASCII value for the key that was pressed. (See more of the event object on page 394.)
The String method fromCharCode() converts the ASCII value of the key to the character value that is shown on the key; e.g., ASCII 65 is character "A".
If the browser isn't Netscape, the alternative for this example is Internet Explorer. IE uses the keyCode property to represent the numeric value of the key being pressed. The fromCharCode() String method converts the number to a character. The output is displayed for both browsers in Figures 12.26 and 12.27.

Figure 12.26. Netscape 7 and the onKeyPress event.

Figure 12.27. Internet Explorer and the onKeyPress event.

Example 12.20

 <html>     <head><title>Key Events</title>     </head>     <body bgcolor="white"><font face="arial">     <center><img src="key.gif"></center>     <center><b><h2>Events</h2>     <h3>     <br>A <font color="blue">blue </font>bouncing arrow will appear     when you press a key down<br>and a <font color="red">red</font>     jumping arrow appears when you release the key<br></b> 1   <form>         Type something in the box: 2       <input type="text" size=10 3  onKeyDown="document.Arrow.src='images/down_arrow.gif'"  4  onKeyUp="document.Arrow.src='images/up_arrow.gif'">  <input type=reset value="reset">     </form> 5  <img src="images/up_arrow.gif" name="Arrow">  </body></html>

EXPLANATION

The HTML form starts here.
The input type is a text box field that will hold 10 characters .
The onKeyDown event occurs when a user presses one of the keys on his keyboard. This event is assigned an image of a blue, bouncing down arrow that will appear as soon as the key is pressed and disappear when the key is released.
The onKeyUp event occurs when a user releases a key. This event is assigned an image of a red, bouncing up arrow that is always bouncing when the keys are not being used, since it is set as the default image on line 5.
This is the default image named Arrow ; it will be displayed when the document loads. See Figure 12.28.

Figure 12.28. The user starts typing in the text box. When a key is pressed down, a blue arrow starts bouncing down. When the key is released, the red arrow starts bouncing upwards

12.7 Handling Key Events: onKeyPress, onKeyDown , and onKeyUp