Best IT Recipes

Keypress event handling (F1-F12) using JavaScript and jQuery, cross browser

I want to handle F1-F12 keys using JavaScript and jQuery.

I’m not sure what errors to avoid, and I can’t test implementations in other browsers except Internet Explorer 8, Google Chrome and Mozilla FireFox 3.

Any suggestions for a complete cross-browser solution? Something like a well-tested jQuery library or maybe just vanilla jQuery / JavaScript?

+55
javascript jquery events keyboard keyboard-events
Jan 08 '09 at 14:26
source share
11 answers

The best source I have for this question is the page: http://www.quirksmode.org/js/keys.html

What they say is that the keycodes are odd in Safari and consistent everywhere (except that IE does not have a keystroke event, but I believe that work on working with keys).

+17
Jan 12 '09 at 18:36
source share

I agree with William that on the whole, grabbing function keys is a bad idea. However, I found a shortcut library that adds this functionality as well as other keyboard shortcuts and shortcuts very easily.

One keystroke:

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

Keyboard Shortcut:

 shortcut.add("Ctrl+Shift+A", function() { alert("Ctrl Shift A pressed"); });
+36
Jan 10 2018-12-12T00:
source share

I am not sure that it is possible to intercept function keys, but I would not use the function keys together. Function keys are used by browsers to perform many tasks, some of which are fairly common. For example, in Firefox on Linux, at least six or seven function keys are reserved for use by the browser:

  • F1 (Help),
  • F3 (search),
  • F5 (Update),
  • F6 (focus address bar),
  • F7 (view mode in view mode),
  • F11 (full screen) and
  • F12 (used by several add-ons, including Firebug)

The worst part is that different browsers on different operating systems use different keys for different things. These are many differences. You should stick with safer, less frequently used keyboard shortcuts.

+22
Jan 08 '09 at 14:35
source share

Without another outer class, you can create your own personal hacked code just by using

 event.keyCode

Another help for everyone, I think, is a test page for intercepting keyCode (just copy and flash in a new .html file to test your event).

  <html> <head> <title>Untitled</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style type="text/css"> td,th{border:2px solid #aaa;} </style> <script type="text/javascript"> var t_cel,tc_ln; if(document.addEventListener){ //code for Moz document.addEventListener("keydown",keyCapt,false); document.addEventListener("keyup",keyCapt,false); document.addEventListener("keypress",keyCapt,false); }else{ document.attachEvent("onkeydown",keyCapt); //code for IE document.attachEvent("onkeyup",keyCapt); document.attachEvent("onkeypress",keyCapt); } function keyCapt(e){ if(typeof window.event!="undefined"){ e=window.event;//code for IE } if(e.type=="keydown"){ t_cel[0].innerHTML=e.keyCode; t_cel[3].innerHTML=e.charCode; }else if(e.type=="keyup"){ t_cel[1].innerHTML=e.keyCode; t_cel[4].innerHTML=e.charCode; }else if(e.type=="keypress"){ t_cel[2].innerHTML=e.keyCode; t_cel[5].innerHTML=e.charCode; } } window.onload=function(){ t_cel=document.getElementById("tblOne").getElementsByTagName("td"); tc_ln=t_cel.length; } </script> </head> <body> <table id="tblOne"> <tr> <th style="border:none;"></th><th>onkeydown</th><th>onkeyup</th><th>onkeypress</td> </tr> <tr> <th>keyCode</th><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td> </tr> <tr> <th>charCode</th><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td> </tr> </table> <button onclick="for(i=0;i<tc_ln;i++){t_cel[i].innerHTML='&nbsp;'};">CLEAR</button> </body> </html>

Here is a working demo, so you can try it right here:

 var t_cel, tc_ln; if (document.addEventListener) { //code for Moz document.addEventListener("keydown", keyCapt, false); document.addEventListener("keyup", keyCapt, false); document.addEventListener("keypress", keyCapt, false); } else { document.attachEvent("onkeydown", keyCapt); //code for IE document.attachEvent("onkeyup", keyCapt); document.attachEvent("onkeypress", keyCapt); } function keyCapt(e) { if (typeof window.event != "undefined") { e = window.event; //code for IE } if (e.type == "keydown") { t_cel[0].innerHTML = e.keyCode; t_cel[3].innerHTML = e.charCode; } else if (e.type == "keyup") { t_cel[1].innerHTML = e.keyCode; t_cel[4].innerHTML = e.charCode; } else if (e.type == "keypress") { t_cel[2].innerHTML = e.keyCode; t_cel[5].innerHTML = e.charCode; } } window.onload = function() { t_cel = document.getElementById("tblOne").getElementsByTagName("td"); tc_ln = t_cel.length; } 
 td, th { border: 2px solid #aaa; } 
 <html> <head> <title>Untitled</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body> <table id="tblOne"> <tr> <th style="border:none;"></th> <th>onkeydown</th> <th>onkeyup</th> <th>onkeypress</td> </tr> <tr> <th>keyCode</th> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <th>charCode</th> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> <button onclick="for(i=0;i<tc_ln;i++){t_cel[i].innerHTML='&nbsp;'};">CLEAR</button> </body> </html>
+9
Apr 3 '13 at
source share

Wow this is very simple. I'm to blame for writing this, why hasn't anyone done this before?

 $(function(){ //Yes! use keydown 'cus some keys is fired only in this trigger, //such arrows keys $("body").keydown(function(e){ //well you need keep on mind that your browser use some keys //to call some function, so we'll prevent this e.preventDefault(); //now we caught the key code, yabadabadoo!! var keyCode = e.keyCode || e.which; //your keyCode contains the key code, F1 to F12 //is among 112 and 123. Just it. console.log(keyCode); }); });
+5
Nov 18 '16 at 10:48
source share

Try this solution if it works.

 window.onkeypress = function(e) { if ((e.which || e.keyCode) == 116) { alert("fresh"); } }
0
Jun 09 '15 at 11:20
source share

When you use angular.js to handle events, you should use ng-keydown to prevent pause in developer in chrome.

0
Dec 10 '16 at 6:55
source share

This works for me.

if(code ==112) { alert("F1 was pressed!!"); return false; }

F2 - 113, F3 - 114, F4 - 115, and therefore fort.

0
Jan 13 '17 at 7:32
source share

One of the problems when capturing F1-F12 keys is that the default function must also be overridden. Below is an example implementation of the F1 'Help' key with an override that prevents the default tooltip. This solution can be extended for keys F2-F12. In addition, this example does not intentionally capture key combinations, but it can also be changed.

 <html> <head> <!-- Note: reference your JQuery library here --> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> </head> <body> <h1>F-key trap example</h1> <div><h2>Example: Press the 'F1' key to open help</h2></div> <script type="text/javascript"> //uncomment to prevent on startup //removeDefaultFunction(); /** Prevents the default function such as the help pop-up **/ function removeDefaultFunction() { window.onhelp = function () { return false; } } /** use keydown event and trap only the F-key, but not combinations with SHIFT/CTRL/ALT **/ $(window).bind('keydown', function(e) { //This is the F1 key code, but NOT with SHIFT/CTRL/ALT var keyCode = e.keyCode || e.which; if((keyCode == 112 || e.key == 'F1') && !(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey)) { // prevent code starts here: removeDefaultFunction(); e.cancelable = true; e.stopPropagation(); e.preventDefault(); e.returnValue = false; // Open help window here instead of alert alert('F1 Help key opened, ' + keyCode); } // Add other F-keys here: else if((keyCode == 113 || e.key == 'F2') && !(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey)) { // prevent code starts here: removeDefaultFunction(); e.cancelable = true; e.stopPropagation(); e.preventDefault(); e.returnValue = false; // Do something else for F2 alert('F2 key opened, ' + keyCode); } }); </script> </body> </html>

I took a similar solution from a related SO article when developing it. Let me know if this worked for you too.

0
Feb 22 '17 at 22:02
source share

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; };
0
Oct 26 '17 at 11:17 on
source share

Add shortcut:

 $.Shortcuts.add({ type: 'down', mask: 'Ctrl+A', handler: function() { debug('Ctrl+A'); } });

Start responding to shortcuts:

 $.Shortcuts.start();

Add a shortcut to the "other" list:

 $.Shortcuts.add({ type: 'hold', mask: 'Shift+Up', handler: function() { debug('Shift+Up'); }, list: 'another' });

Activate the "other" list:

 $.Shortcuts.start('another'); Remove a shortcut: $.Shortcuts.remove({ type: 'hold', mask: 'Shift+Up', list: 'another' });

Stop (disable event handlers):

 $.Shortcuts.stop();


Tutorial:
http://www.stepanreznikov.com/js-shortcuts/

-one
Feb 25 '15 at 20:55
source share


More articles:


All Articles