How to add keyboard shortcuts to your website
The following javascript code will allow you to add keyboard shortcuts to any webpage.
The code
(put this on any page where you want keyboard shortcuts)
<head>
<script type="text/javascript" language="JavaScript" src="shortcut.js"></script>
</head>
<body onkeydown='keyShortcut()'>
</html>
(put this in a file called shortcut.js and upload to the same directory as the webpage with the above code). This example will display an alert message when the escape key is pressed.
var e = window.event;
var code = e.keyCode;
if (code == 112) { //checks for the escape key
alert('escape key pressed');
}
}
The following are some more keyboard codes that can be used within the above script (in the if code == X, where X is one of the codes below).
| key | Code |
| tab | 9 |
| enter | 13 |
| leftwindow key | 91 |
| right window key | 92 |
| f1 | 112 |
| f2 | 113 |
| f3 | 114 |
| f4 | 115 |
| f5 | 116 |
| f6 | 117 |
| f7 | 118 |
| f8 | 119 |
| f9 | 120 |
| f10 | 121 |
| f11 | 122 |
| f12 | 123 |
Other Methods
HTML has built-in methods that allow you to add keyboard shortcuts to certain elements on a page. These are also supported by firefox, Internet Explorer, and Opera.
accesskey = Character
The accesskey attribute is used to assign a shortcut key to an HTML element of the following types A, AREA, BUTTON, INPUT, LABEL, LEGEND, and TEXTAREA 1.
When the user performs the appropriate keystroke focus is moved to the element.
If the element is a link the link is followed to the referenced document.
If the element is an input or label the cursor is moved to that element.
Depending on the browser, the keystroke to use the accesskey will differ (CHARACTER is any character in the containing documents charset).
- Internet Explorer use: ALT-CHARACTER
- Mozilla Firefox use: ALT-SHIFT-CHARACTER
- Opera use: SHIFT-ESC then CHARACTER
0 comments
Kick things off by filling out the form below.
Leave a Comment