Previous Page
Next Page

Key Event Handling

Besides the mouse, the other main input device is the keyboard, at least until they get that cool computer thought-control device working. Just as with the mouse, JavaScript has the mojo to handle the keyboard.

The onkeydown event

It's handy to allow users to control your Web page via their keyboard as well as via their mouse. With the key event handlers, you can trigger events to happen when the appropriate keys are pressed. In Scripts 9.19 and 9.20, a standard slideshow (otherwise identical to the one in Script 4.17) can be viewed by pressing the left and right arrow keys on the keyboard (Figure 9.9).

Script 9.19. The HTML for the slideshow.

[View full width]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Image Slideshow</title>
     <script language="Javascript"  type="text/javascript" src="script10.js">
     </script>
</head>
<body bgcolor="#FFFFFF">
     <h3 align="center">
        <img src="images/callisto.jpg"  id="myPicture" width="262"  height="262"
 alt="Slideshow" /><br />
        Use the right and left arrows on your keyboard to view the slideshow
     </h3>
</body>
</html>

Script 9.20. Use the onkeydown handler in this script to trigger a slide change.

[View full width]
document.onkeydown = keyHit;
var thisPic = 0;

function keyHit(evt) {
     var myPix = new Array("images/callisto.jpg", "images/europa.jpg","images/io.jpg",
 "images/ganymede.jpg");
     var imgCt = myPix.length-1;
     var ltArrow = 37;
     var rtArrow = 39;

     var thisKey = (evt) ? evt.which : window.event.keyCode;

     if (thisKey == ltArrow) {
        chgSlide(-1);
     }
     else if (thisKey == rtArrow) {
        chgSlide(1);
     }
     return false;

     function chgSlide(direction) {
        thisPic = thisPic + direction;
        if (thisPic > imgCt) {
           thisPic = 0;
        }
        if (thisPic < 0) {
           thisPic = imgCt;
        }
        document.getElementById("myPicture"). src = myPix[thisPic];
     }
}

Figure 9.9. This slideshow is controlled with keypresses, rather than mouse clicks on navigation buttons.


1. 
document.onkeydown = keyHit;



Here we register the keyHit() function as the one to handle onkeydown events.

2. 
var thisPic = 0;



The variable thisPic is initialized and set globally, so that it's stored and available for use every time keyHit() is called.

3. 
function keyHit(evt) {



The keyHit() function handles the event when keys are hit.

4. 
var ltArrow = 37;
var rtArrow = 39;



We need to store the appropriate values for when a key is hit. The left arrow key generates a 37, and the right arrow triggers a 39.

5. 
var thisKey = (evt) ? evt.which : window.event.keyCode;



How we know which key the user hit depends on which browser they're using. If it's Firefox or Safari, we look at evt.which, which contains the code for the key hit. If it's IE, that same value will be in window.event.keyCode. Either way, the result is saved in thisKey.

6. 
if (thisKey == ltArrow) {
  chgSlide(-1);
}
else if (thisKey == rtArrow) {
  chgSlide(1);
}



If the user pressed the left arrow, then go backward through the slideshow. If they pressed the right arrow, go forward. If they chose any other key, don't do anything at all.

7. 
return false;



This line is there to work around a bug in a single browser: Safari. Other browsers handle this just fine, but Safari triggers two keystrokes instead of one (causing onkeydown to be triggered twice) every time you press an arrow. If you return a value of false, Safari knows that it should stop handling these events, and other browsers don't care one way or another.

The onkeyup event

The onkeyup event handler is identical to the onkeydown handler, except that (big surprise) it gets called when the user has completed pressing the key down and is now letting it come back up again.

The onkeypress event

The onkeypress event is triggered when the user both presses a key down and also lets the key back up againjust for completeness's sake.

Tip

  • If you're not sure what the key values are for a particular key, you can find out by putting the line alert(thiskey); in between the lines of code in steps 5 and 6; then, press the key for which you want to find the value. The alert box contains the numeric key value.



Previous Page
Next Page