The Cross-Browser Event Model: Detecting Modifier Keys - Doc JavaScript

Detecting Modifier Keys

Internet Explorer 4.0x and Navigator 4.0x have different ways of detecting what modifier keys were pressed down when an event occurred. In this section of the column we'll show you how to get these systems to work together. Take a look at the following example:

<SCRIPT LANGUAGE="JavaScript">
<!--
var nav4 = window.Event ? true : false;
function modifiers(e) {
  if (nav4) { 
     document.keys.alt.checked = e.modifiers & Event.ALT_MASK;
     document.keys.control.checked = e.modifiers & Event.CONTROL_MASK;
     document.keys.shift.checked = e.modifiers & Event.SHIFT_MASK;
     document.keys.meta.checked = e.modifiers & Event.META_MASK;
  } else {
     document.keys.alt.checked = window.event.altKey;
     document.keys.control.checked = window.event.ctrlKey;
     document.keys.shift.checked = window.event.shiftKey;
     document.keys.meta.checked = false;
  }
  return false;
}
// -->
</SCRIPT>
<P>Hold one or more modifier keys and click
<A HREF="javascript:void(0)"
   onMouseDown="return modifiers(event)"
   onClick="return false">here</A>.</P>
<FORM NAME="keys">
<INPUT TYPE="checkbox" NAME="alt"> Alt
<INPUT TYPE="checkbox" NAME="control"> Control
<INPUT TYPE="checkbox" NAME="meta"> Meta
<INPUT TYPE="checkbox" NAME="shift"> Shift
</FORM>

Here's the example in action:

Hold one or more modifier keys and click here.

Alt Control Meta Shift

Unlike Internet Explorer 4.0x, Navigator 4.0x's modifier keys are reflected in one property: modifiers. This property must be used against a constant property of the Event object with the bitwise AND operator in order to find out which modifier keys were pressed when the event occurred. For example, the expression:

e.modifiers & Event.ALT_MASK

evaluates to a Boolean value indicating the state of the Alt key when the event occurred. Internet Explorer 4.0x simplifies the process by providing a separate property for each modifier key. These properties (alt, ctrl, shift) have a Boolean value, so no operator is required to extract the desired information.

The void() function in the example simply specifies that the link has no real URL and doesn't execute any user-defined function. Notice that the onmousedown event handler returns the value that is returned by the modifiers() function, which is false. This cancels the default operation of the event. For example, if it didn't cancel the event, the browser would attempt to save the document to the client's hard disk when you click the link with the Shift key pressed. We added the onclick event handler in order to cancel the click event as well.

Notice the use of the event object in the event handler script. Since the onmousedown event handler is defined as an HTML attribute rather than a JavaScript property, the event handler must explicitly hand the event object to the event processing function. The keyword event refers to the window.event object in Internet Explorer 4.0x. Therefore, we could have used the functions parameter for Internet Explorer 4.0x as well. For your reference, the script would then be:

<SCRIPT LANGUAGE="JavaScript">
<!--
var nav4 = window.Event ? true : false;
function modifiers(e) {
  if (nav4) { 
     document.keys.alt.checked = e.modifiers & Event.ALT_MASK;
     document.keys.control.checked = e.modifiers & Event.CONTROL_MASK;
     document.keys.shift.checked = e.modifiers & Event.SHIFT_MASK;
     document.keys.meta.checked = e.modifiers & Event.META_MASK;
  } else {
     document.keys.alt.checked = e.altKey;
     document.keys.control.checked = e.ctrlKey;
     document.keys.shift.checked = e.shiftKey;
     document.keys.meta.checked = false;
  }
  return false;
}
// -->
</SCRIPT>
<P>Hold one or more modifier keys and click
<A HREF="javascript:void(0)"
   onMouseDown="return modifiers(event)"
   onClick="return false">here</A>.</P>
<FORM NAME="keys">
<INPUT TYPE="checkbox" NAME="alt"> Alt
<INPUT TYPE="checkbox" NAME="control"> Control
<INPUT TYPE="checkbox" NAME="meta"> Meta
<INPUT TYPE="checkbox" NAME="shift"> Shift
</FORM>

Note that Internet Explorer 4.0x doesn't support the Meta modifier key, so the script always unchecks the corresponding checkbox under Internet Explorer 4.0x. On the Macintosh version of Internet Explorer 4.0, the Control key does not work.

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

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