| Unlike other keyboard keys, modifier keys (Shift, Control, Alt/Option, and Command) do not register with a numeric value in all browsers on all operating systems. Instead, these keys can be detected directly from the event, so you can tailor your code depending on which key was pressed. Each of these keys has its own unique event property: shiftKey, ctrlKey, altKey, and metaKey (for the Apple Command key). In this example (Figure 15.6), press any of the modifier keys (plus any character key on the Mac), and an alert will appear telling you which modifier key was pressed. Figure 15.6. The modifier key the user pressed is displayed in an alert message. 
To find which modifier key has been pressed: | | 1. | function initPage() {...}
Add the function initPage() to your JavaScript and bind a keydown event to an object (Code 15.3).
Code 15.3. The event object properties shiftKey, ctrlKey, altKey, and metaKey are used to test for which modifier key the user pressed.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS,DHTML &Ajax | Detecting which Modifier Key was Pressed</title> <script type="text/javascript"> function initPage() { window.document.onkeydown=findModifierKey; } function findModifierKey(evt) { var evt = (evt) ? evt : ((window.event) ? window.event : null); if (evt) { if(evt.shiftKey) alert ('The Shift Key has been pressed'); if(evt.ctrlKey) alert ('The Control Key has been pressed'); if(evt.altKey) alert ('The Alt/Option Key has been pressed'); if(evt.metaKey) alert ('The Command Key has been pressed'); }} </script> </head> <body onload="initPage()"> <h1>Press any modifier key (shift, control, option/alt, or command)</h1> </body></html>
|
In this example, to detect whenever a key is pressed with the page loaded, I used window.document. However, you could also bind the event to a form input field to detect key presses there.
| | | 2. | function findModifierKey(evt) {...}
Add the function findModifierKey() to your JavaScript.
This code first uses the event equalizer discussed in Chapter 12 ("Passing Events to a Function") to allow Internet Explorer and W3C-compliant browsers to play together:
var evt = (evt) ? evt : ((window.event) ? window.event : null);
It then evaluates the event for each modifier key object to see if it is true (if that was the key pressed).
For this example, I simply added an alert to report which modifier key was pressed, but you could use the if or switch statements to tailor the code for different modifier keys.
| 3. | onload="initPage();"
Add an onload event handler in the <body> tag to trigger the initPage() function created in Step 1. This sets up the events for the page.
|
 Tips
Windows users should know that on the Mac, the Alt key is labeled Option, but both keys do the same thing. The Mac will not detect the modifier key until pressed in combination with a character key. On the Mac, the Control key can be used as a modifier key with the mouse button, in place of the Windows right-mouse click.
|
