9.8 Reading Which Character Key Was Typed

NN 4, IE 4

9.8.1 Problem

You want to inspect each alphanumeric key typed by the user before the character reaches a form field.

9.8.2 Solution

The following function should be invoked by an onkeypress event handler bound to a text input field in which you want to limit characters to the digits 0 through 9, a minus sign, and a decimal:

function numberOnly(evt) {
    evt = (evt) ? evt : ((window.event) ? event : null);
    if (evt) {
       var elem = (evt.target) ? evt.target : 
          ((evt.srcElement) ? evt.srcElement : null);
       if (elem) {
           var charCode = (evt.charCode) ? evt.charCode : 
               ((evt.which) ? evt.which : evt.keyCode);
           if ((charCode < 32 ) || 
               (charCode > 44 && charCode < 47) || 
               (charCode > 47 && charCode < 58)) {
               return true;
           } else {
               return false;
           }
       }
    }
}

9.8.3 Discussion

Of the three keyboard-related events—onkeydown, onkeyup, and onkeypress—the onkeypress event is used to examine a typed character. See Recipe 9.9 for using the other two events.

Details about the typed character are contained in event object properties of different names depending on the event model used in the browser. Internet Explorer 4 and later use only the keyCode property for all keyboard-related event details. In response to an onkeypress event, the keyCode property contains the Unicode integer value of the character being typed. Netscape 6 and later reserves the keyCode property for a different purpose (see Recipe 9.9), and presents the charCode property to return the same Unicode integer that IE's keyCode property returns. The now defunct Navigator 4 event model uses the which property (the same one that reports mouse button numbers) to return the character value. The preceding example equalizes all three of these systems to derive a single value that can be used for value comparisons.

For English-language characters, the Unicode values are the same as those of the ASCII-character set. Appendix A contains a list of ASCII characters and their corresponding codes. Notice that upper- and lowercase letters have different codes; standard punctuation symbols also have codes. In addition, some control character keys (Tab, Space, Backspace, and Enter/Return) have low number codes.

The complexity of the numberOnly( ) function is in the combination of comparison expressions in the if statement. The comparisons state that the function should allow the default action of the character reaching the field if its character code falls into any of these categories:

• It's below the first true typeable character (the Space character, with a value of 32).

• It's equal to 45 or 46 (the hyphen or period characters).

• It's one of the digits 0 through 9 (Unicode values 48 through 57, inclusive).

All other values force the function to return false, which prevents the character from reaching the text field.

Only IE (both Windows and Mac) allows the event object property bearing the character code to be altered between the time the user types the key and when the character appears in the field. Some might consider this a potential security risk: an unsuspecting user types one thing but the script enters something else into the field character-by-character. But this capability does come in handy if you are providing an entry form for a database that requires all uppercase characters in fields. You can automatically convert lowercase letters to uppercase, while leaving all other characters alone. The IE-only function is:

function upperOnly( ) {
    var charCode = event.keyCode;
    if (charCode > 96 && charCode < 123) {
        event.keyCode = charCode - 32;
    }
}

A cross-browser approach to this task is to use the field's onchange or form's onsubmit event handler to process the value of the field, running its content through the JavaScript String object's toUpperCase( ) method and putting the results back into the field.

9.8.4 See Also

Recipe 9.9 for examining events of noncharacter keys; Recipe 9.10 for reading modifier keys used with other character keys; Recipe 8.11 for more about prefiltering characters typed into text boxes.