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

javascript jquery events keyboard keyboard-events

177,813

Solution 1

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).

Solution 2

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");
});

Solution 3

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:

F1 (Help),
F3 (Search),
F5 (Refresh),
F6 (focus address bar),
F7 (caret browsing mode),
F11 (full screen mode), 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. That's a lot of differences to account for. You should stick to safer, less commonly used key combinations.

Solution 4

It is very simple.

$(function(){
    //Yes! use keydown because some keys are fired only in this trigger,
    //such arrows keys
    $("body").keydown(function(e){
         //well so 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.
         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);       
    });
});

Solution 5

Without other external class you can create your personal hack code simply using

event.keyCode

Another help for all, I think is this test page for intercept the keyCode (simply copy and past in new file.html for testing 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>

View more solutions

177,813

cllpse

Designing and developing websites and app's for close to two decades.

Updated on October 12, 2021

Comments

cllpse over 2 years

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?
cllpse over 15 years

Yes, I know that some keys are reserved. Never the less; I want to use whatever keys are not.
gizmo over 15 years

On my computer, all the F-keys are reserved. Using Opera with some custom shortcut. Never EVER relies on "commonly unreserved keys" conventions.
William Brendel over 15 years

Is there a specific reason? I'm just finding it hard to think of a situation that would require the use of function keys. This is purely curiosity on my part; I'm not trying to talk you out of anything, merely suggesting alternatives.
Joe Dargie about 14 years

“I want to use whatever keys are not” — Thing is, you can’t tell programmatically what keys aren’t reserved. Taking over the function keys might well be fine for your app, but it’s difficult to tell.
raj almost 10 years

Thanks @paladinux, your code is working fine for me. I am customizing it to call custom functions on key press. But I am facing one issue. Whenever I type characters 'q,r,s,t,u', page automatically executes the custom functions as these keys have same keycodes as function keys F2...F7 (113..118)
Bmo over 9 years

@WilliamBrendel I'm working with a handheld industrial scanner. I have to use function keys.
Alvaro Flaño Larrondo about 9 years

Looks like a really nice library! Thanks for sharing it.
Basile Starynkevitch over 8 years

How did you guess the 116 value?
Ofir Attia over 8 years

@BasileStarynkevitch please see this one.. help.adobe.com/en_US/AS2LCR/Flash_10.0/…
Juan Lanus about 8 years

@BasileStarynkevitch I found my key code value by setting a breakpoint in the right place and inspecting event.which (the event property that bears the appropriate information)
Nicolas Zozol over 7 years

Works perfectly on recent chrome, even with F5-F11 functions
Joe Dargie almost 7 years

I forget where I found it, but Jan Wolter wrote a great page on JavaScript keyboard events too: unixpapa.com/js/key.html
KingOfAllTrades over 5 years

@Bmo I knew right away it was industrial something; I bet you're trying to mimic ERP functionality in a webpage and need to handle F keys. I'm in that same spot! :)
Herbert Van-Vliet over 4 years

@WilliamBrendel: After all these years I still wonder if anyone intentionally presses F1... :)
mix3d over 4 years

maybe fix the this.onX events so the example is more portable?
bryc almost 4 years

F1 was traditionally important in 90s on PCs because how to operate a game or program was not always apparent in fullscreen. Web apps now act like programs so someone may want to press F1 to see view how to operate it.
Cees almost 3 years

I like your approach the best since it allows you to capture the keys you want and pass on the rest. I noticed with your solution i problem. things like ctrl + shift + r was also captured. if you want every event to be canceled this is great. but i would suggest to do it in your logic itself. if(key == x) {e.preventDefault(); (your logic goes here)} return e to help resolve that problem.