How to add keyboard shortcuts to your website
By Justin Silverton
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)
<html>
<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.
function keyShortcut() {
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
7 Comments so far
Leave a reply
simple enough, but note that it won’t always work because if you have a comment box or something and the user types a letter or presses enter, it would activate your script (which could be a real annoyance).
true, but you could also pick a key combination that someone would never type on a box and wouldn’t cause a problem with their browser (such as F2).
Yes, this is very interesting. But how do you use it to let’s say access hidden divs in your page? Or set it to reload the page? Or link to another page/ go to sitemap? Stuff like that.
“Yes, this is very interesting. But how do you use it to let’s say access hidden divs in your page?”
Assign the div an ID and access it with a javascript function.
“Or set it to reload the page? Or link to another page/ go to sitemap? Stuff like that. ”
Both of these have functions in javascript that can be loaded when a certain key is pressed. You would just put that functionality in the place of alert()…
Great tip, I’ve been looking for something like this for a while.
[…] Vía: By Justin Silverton http://www.whenpenguinsattack.com/ […]
Just a small thing to your example:
the escape key has the code 27, not 112
greetz gsnerf