9.10 Determining Which Modifier Keys Were Pressed During an Event

NN 6, IE 4

9.10.1 Problem

You want to know if the Ctrl, Alt, or Shift modifier keys were being held down during the last event.

9.10.2 Solution

Both the IE and W3C DOM event models use the same set of event object properties to report whether the modifier keys were pressed during the event. The property names are:

• altKey

• ctrlKey

• shiftKey

Another property, metaKey, is active on the Macintosh keyboard as the Command key (but is not supported by IE/Mac). Each property has a value of true or false when an event fires. If the property value is true, the corresponding key was held down at the instant the event fired. The following event function performs one set of actions during an unmodified click, and another action if the Shift key is held down during the click:

function handleClick(evt) {
    evt = (evt) ? evt : ((window.event) ? event : null);
    if (evt) {
        if (evt.shiftKey) {
            // process Shift-Click here
        } else {
            // process normal Click here
        }
    }
}

9.10.3 Discussion

Limiting event processing to cases in which multiple modifier keys are held down is as easy as increasing the test applied to the event object. For example, if you want a branch of your event handler function to operate only when the Shift and Ctrl keys are pressed, the if condition becomes:

if (evt.shiftKey && evt.ctrlKey) {...}

You can easily get carried away designing several possible execution branches based on combinations of modifier keys being held down during the event. From a user interface design point of view, however, it's best to limit the number of choices you offer to prevent the user from getting completely confused about what the event does. Because users have different experience with modifier keys from other programs, you might consider offering just one alternative execution branch, and let any modifier key act as the gateway to that branch. To accomplish this, use the Boolean OR (||) operator in your if condition, and include all modifier key properties:

if (evt.altKey || evt.ctrlKey || evt.metaKey || evt.shiftKey) {...}

The issue about the metaKey property for Macintosh keyboards and Netscape browsers is important to understand if you have not had experience on a Mac. Macintosh programs provide the same kind of accelerator keyboard combinations as in Windows and other platforms. But instead of the ubiquitous Ctrl-key combinations in Windows programs, the Macintosh uses the Command key (the one with the symbol on it if you've ever seen it). In other words, as comfortable as a Windows or Unix user is with Ctrl-key combinations, Mac users are comfortable with Command-key combinations. The Alt key (called the Option key on a Mac) is also commonly used in programs and user interface tasks (such as Option-dragging on the desktop to move a copy of a file from one folder to another).

9.10.4 See Also

Recipe 9.7 for handling mouse events; Recipe 9.8 for reading the character key (perhaps in concert with a modifier key); Recipe 9.9 for reading navigation and function key event values.