Handling key-press events (F1-F12) using JavaScript and jQuery, cross-browser

javascript jquery events keyboard keyboard-events
cllpse picture cllpse · Jan 8, 2009 · Viewed 156.7k times · Source

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?

Answer

matsev picture matsev · Jan 10, 2012

I agree with William that in general it is a bad idea to hijack the function keys. That said, I found the shortcut library that adds this functionality, as well as other keyboard shortcuts and combination, in a very slick way.

Single keystroke:

shortcut.add("F1", function() {
    alert("F1 pressed");
});

Combination of keystrokes:

shortcut.add("Ctrl+Shift+A", function() {
    alert("Ctrl Shift A pressed");
});

Related questions

How to find the key code for a specific key

What's the easiest way to find the keycode for a specific key press? Are there any good online tools that just capture any key event and show the code? I want to try and find the key codes for special …

Read More
How to know if .keyup() is a character key (jQuery)

How to know if .keyup() is a character key (jQuery) $("input").keyup(function() { if (key is a character) { //such as a b A b c 5 3 2 $ # ^ ! ^ * # ...etc not enter key or shift or Esc or space ...etc /* Do stuff */ } });

Read More
Event binding on dynamically created elements?

I have a bit of code where I am looping through all the select boxes on a page and binding a .hover event to them to do a bit of twiddling with their width on mouse on/off. This happens …

Read More