Modifier Keys

Modifier keys are special-purpose keys—such as Atl, Ctrl, and Shift—that may or may not alter the behavior of an event. Most commonly, the Alt key is used to access a program‧s menus, the Ctrl key is used to perform common tasks such as copying and pasting, and the Shift key is used to enter capital letters instead of lowercase letters. You can use modifier keys on your Web pages in a similar way.

The following is an example that visually displays the modifier keys that are pressed when an event occurs:

<html>
  <head>
    <title>
      JavaScript Professional Projects " Modifier Keys
    </title>

    <style type="text/css">
    <!--
      .modKeys{ position: relative;
                 clip:rect( 0, 80, 18, 0 );
                 background-color: white; }
    -->
    </style>

    <script language="JavaScript">
    <!--
      var isNav = navigator.appName == "Netscape";

      function getModifiers( event )
      {
        var alt = ( isNav ? event.modifiers & Event.ALT_MASK :
                             window.event.altKey );
        var ctr = ( isNav ? event.modifiers & Event.CONTROL_MASK :
                             window.event.ctrlKey );
        var sft = ( isNav ? event.modifiers & Event.SHIFT_MASK :
                             window.event.shiftKey );
        setColor( "key1", ( alt ? "gray" : "white" ) );
        setColor( "key2", ( ctr ? "gray" : "white" ) );
        setColor( "key3", ( sft ? "gray" : "white" ) );
       }
 
       function setColor( object, color )
       {
         var obj = eval( "document." + ( !isNav ? "all." : "" ) +
                          object + ( !isNav ? ".style" : "" ) );

         if( isNav )
           obj.bgColor = color;
         else
           obj.backgroundColor = color;
       }
      // -->
      </script>
  </head>

 <body>

  <center>
    <font size=6>JavaScript Professional Projects</font><br>
    <font size=4>Chapter 6: Modifier Keys</font>
  </center>

   <br><br>

   <table border="1" cellpadding="0" cellspacing="0" width="50%">
   <tr>
     <td width="75%" colspan="3">
       <b><font face="Courier" size="5">
            Modifier Keys:
       </font></b>
     </td>
   </tr>
   <tr>
     <td width=80 height=20 align=center ID=key1 class=modKeys>
       <font face="Courier" size="5">Alt</font>
     </td>
     <td width=80 height=20 align=center ID=key2 class=modKeys>
       <font face="Courier" size="5">Control</font>
     </td>
     <td width=80 height=20 align=center ID=key3 class=modKeys>
     <font face="Courier" size="5">Shift</font>
      </td>
    </tr>
   </table>

   <p>
        <font size="4">
         While holding one or more modifier keys, click
         <a href="JavaScript: void(0);"
            onMouseDown="JavaScript: getModifiers( event );">here</a>
         to find out which ones you are using.
        </font>
   </p>
 </body>
</html>

As you can see, the event model is different for each browser. The implementation in the Internet Explorer browser is fairly straightforward—you get the boolean value representing the state of the modifier key by the window.event property, followed by the modifier key. With Netscape, however, you need to use the bitwise operator and (&) to get the same information.

The following is an example of how to get all modifier key flags out of the event object:

var altPressed = event.modifiers & Event.ALT_MASK;
var ctrlPressed = event.modifiers & Event.CONTROL_MASK;
var shiftPressed = event.modifiers & Event.SHIFT_MASK;
var metaPressed = event.modifiers & Event.META_MASK;

It is important to keep these differences in mind when you're designing for both browser types.