The Cross-Browser Event Model: Button and Key Codes - Doc JavaScript

Button and Key Codes

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.

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

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