spacer

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

home / experts / javascript / column11


Button and Key Codes

Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

Internet Explorer 4.0x features a property that indicates what mouse button was pressed (for a mouse event), and another property that indicates what key was pressed (for a keyboard event). In Navigator 4.0x, one propery (which) serves both cases. The following example demonstrates:

<SCRIPT LANGUAGE="JavaScript">
<!--

var nav4 = window.Event ? true : false;

function codes(e) {
  if (nav4) // Navigator 4.0x
    var whichCode = e.which
  else // Internet Explorer 4.0x
    if (e.type == "keypress") // the user entered a character
      var whichCode = e.keyCode
    else
      var whichCode = e.button;

  if (e.type == "keypress")
    window.status = "kepress: code=" + whichCode + 
                    ", character=" + String.fromCharCode(whichCode)
  else
    window.status = "click: code=" + whichCode;
}

// -->
</SCRIPT>
<FORM NAME="example">
Enter characters in the box:
<INPUT TYPE="text"
       NAME="key"
       SIZE="30"
       onKeyPress="codes(event)"><BR>
Click the button with any mouse button:
<INPUT TYPE="button"
       NAME="mouse"
       VALUE="click here"
       onClick="if (nav4 || window.event) codes(event)">
</FORM>

First try it our by entering characters in the text box and clicking the button. Watch the status bar for the results.

Enter characters in the box:
Click the button with any mouse button:

This example demonstrates many important issues. Notice the conditional statement in the onclick event handler script. Since the onclick event handler is supported by older versions of Navigator (2.0x and 3.0x) and Internet Explorer (3.0x), its script is executed by all JavaScript-enabled browsers. The if statement makes sure the codes() function isn't executed unless the user is running a fourth-generation browser (or above). The specification of the event object in the event handler would otherwise generate a JavaScript error.

If you have access to both Internet Explorer 4.0x and Navigator 4.0x, you probably noticed that the code for the primary mouse button differs. In Internet Explorer 4.0x the value is 0, whereas in Navigator 4.0x it is 1. Furthermore, browsers don't let you trap for this user event. Right clicks in Windows 95 or NT, for example, display a context-sensitive pop-up menu, without passing the event to the page. Therefore, you normally won't check what mouse button the user pressed.

There are several other minor differences between the browsers. For instance, the Backspace key generates a click event on Navigator, but not on Internet Explorer. Also note that several key values differ with the browser. The String.fromCharCode() method should fix this up because it returns the actual character pressed, but instead it introduces new problems. This method returns incorrect characters on the Macintosh version of Internet Explorer 4.0. Since the only key codes that differ are uncommon non-alphanumeric ones, it is best to evaluate the code rather than the character itself, as returned by the String.fromCharCode() method.

http://www.internet.com

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


Created: January 13, 1998
Revised: January 13, 1998

URL: http://www.webreference.com/js/column11/codes.html