I want to handle F1-F12 keys using JavaScript and jQuery.
I am not sure what pitfalls there are to avoid, and I am not currently able to test implementations in any other browsers than Internet Explorer 8, Google Chrome and Mozilla FireFox 3.
Any suggestions to a full cross-browser solution? Something like a well-tested jQuery library or maybe just vanilla jQuery/JavaScript?
The best source I have for this kind of question is this page: http://www.quirksmode.org/js/keys.html
What they say is that the key codes are odd on Safari, and consistent everywhere else (except that there's no keypress event on IE, but I believe keydown works).
I am not sure if intercepting function keys is possible, but I would avoid using function keys all together. Function keys are used by browsers to perform a variety of tasks, some of them quite common. For example, in Firefox on Linux, at least six or seven of the function keys are reserved for use by the browser:
The worst part is that different browsers on different operating systems use different keys for different things. That's a lot of differences to account for. You should stick to safer, less commonly used key combinations.
Solution in ES6 for modern browsers and IE11 (with transpilation to ES5):
//Disable default IE help popup
window.onhelp = function() {
return false;
};
window.onkeydown = evt => {
switch (evt.keyCode) {
//ESC
case 27:
this.onEsc();
break;
//F1
case 112:
this.onF1();
break;
//Fallback to default browser behaviour
default:
return true;
}
//Returning false overrides default browser event
return false;
};
You can use Vanilla Javascript and the KeyboardEvents keydown, keypress or keyup.
Use event.key (preferably) or event.code and compare them against the key name like event.key === "F1".
When working with Function keys you probably want to suppress the default behaviour (On windows many of the function keys are used by the browser).
This can be achieved by calling preventDefault() on the keydown event.
Even if you want to listen to the keyup event you need to call preventDefault() on the keydown event, because the browser shortcut is bound to that event.
Keep in mind, that calling preventDefault() on keydown will also suppress the keypress event.
document
.addEventListener("keydown", e => {
if(e.key === "F1") {
// Suppress default behaviour
// e.g. F1 in Microsoft Edge on Windows usually opens Windows help
e.preventDefault()
}
})
document
.addEventListener("keyup", e => {
if(e.key === "F1") {
// Handle the keyup event
doSomething()
}
})
You can do this with jquery like this:
$("#elemenId").keydown(function (e) {
if(e.key == "F12"){
console.log(e.key);
}
});