spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / dhtml / diner / keypress
DHTML Diner Logo

This is a DHTML cross-browser technique.
The in-page examples will only work in Navigator 4 and Explorer 4, all platforms.

In longer script listings, cross-browser code is blue, Navigator-specific code is red, and Explorer code is green.

All keypresses on this page change the display in the purple-bordered positioned elements on the right.

Developer News
OpenOffice 3.2 Lands Amid Critical Changes
Red Hat, IBM Firmly in KVM Virtualization Camp
Red Hat Talks Up Open Source Cloud Plans

Using the Keypress Event (2)

In Navigator 4, when the keypress event fires, it creates a which property for the event object to store the Unicode (a.k.a. ASCII) value of the key that was pressed. The event object is passed implicitly to the function called by the event handler, as the function's single argument. Using the recognized standard, we identify this argument as e.

In Explorer 4, the event object is passed explicitly, is identified by the keyword event, and is not a function argument. It has a keyCode property to store the Unicode value of the pressed key.

Using the which/keyCode properties, we can determine which alphanumeric key was pressed. In the following example, we store the Unicode value in the whichASC variable:

function doKey(e) {
    whichASC = (NS4) ? e.which : event.keyCode;
}

String Conversion

JavaScript 1.2 introduced the fromCharCode() method of the String object. It creates a string from an integer or comma-delimited series of integers representing Unicode values:

Syntax:

String.fromCharCode(num1,...,numN)

Example:

String.fromCharCode(65,110,100,121); returns "Andy"

Using fromCharCode(), we can determine which key was pressed in a user-friendly string representation. Most of the time, we will want to process a Y and a y (upper and lower-case) in the same manner. For example, in response to a yes/no question. The letter case may not matter in a user's response. In such instances, we should change all keypresses to lower case, using the toLowerCase() method, before processing.

If you are using a version 4 browser, press any key to see the results in the two bordered elements below.

The doKey() function can now be expanded to reflect the string conversion:

function doKey(e) {
    whichASC = (NS4) ? e.which : event.keyCode;
    whichKey = String.fromCharCode(whichASC).toLowerCase();
}

Finally, let's complete the function by adding the switch statement.



Produced by Peter Belesis and


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger

All Rights Reserved. Legal Notices.
Created: June 05, 1998
Revised: June 05, 1998

URL: http://www.webreference.com/dhtml/diner/keypress/keypress2.html