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
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

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

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint

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

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