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

Question

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

User · Answer

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.

User · Answer

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

User · Answer

You can do this with jquery like this               elemenId   keydown function  e                if e key     F12                    console log e key

User · Answer

My solution to this problem is   document onkeypress   function  event        event    event    window event       if  event keyCode    123              return false            With the magic number 123 which is the key F12

User · Answer

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

User · Answer

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      lt html gt    lt head gt    lt title gt Untitled lt  title gt    lt meta http-equiv  content-type  content  text html  charset iso-8859-1  gt    lt style type  text css  gt   td th border 2px solid  aaa     lt  style gt    lt script type  text javascript  gt   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       lt  script gt    lt  head gt    lt body gt    lt table id  tblOne  gt    lt tr gt    lt th style  border none   gt  lt  th gt  lt th gt onkeydown lt  th gt  lt th gt onkeyup lt  th gt  lt th gt onkeypress lt  td gt    lt  tr gt    lt tr gt    lt th gt keyCode lt  th gt  lt td gt  amp nbsp  lt  td gt  lt td gt  amp nbsp  lt  td gt  lt td gt  amp nbsp  lt  td gt    lt  tr gt    lt tr gt    lt th gt charCode lt  th gt  lt td gt  amp nbsp  lt  td gt  lt td gt  amp nbsp  lt  td gt  lt td gt  amp nbsp  lt  td gt    lt  tr gt    lt  table gt    lt button onclick  for i 0 i lt tc ln i    t cel i  innerHTML   amp nbsp      gt CLEAR lt  button gt    lt  body gt    lt  html gt    Here is a working demo so you can try it right here    x000D   x000D  var t cel  tc ln  x000D  if  document addEventListener      code for Moz x000D    document addEventListener  keydown   keyCapt  false   x000D    document addEventListener  keyup   keyCapt  false   x000D    document addEventListener  keypress   keyCapt  false   x000D    else   x000D    document attachEvent  onkeydown   keyCapt     code for IE x000D    document attachEvent  onkeyup   keyCapt   x000D    document attachEvent  onkeypress   keyCapt   x000D    x000D   x000D  function keyCapt e    x000D    if  typeof window event     undefined     x000D      e   window event    code for IE x000D      x000D    if  e type     keydown     x000D      t cel 0  innerHTML   e keyCode  x000D      t cel 3  innerHTML   e charCode  x000D      else if  e type     keyup     x000D      t cel 1  innerHTML   e keyCode  x000D      t cel 4  innerHTML   e charCode  x000D      else if  e type     keypress     x000D      t cel 2  innerHTML   e keyCode  x000D      t cel 5  innerHTML   e charCode  x000D      x000D    x000D  window onload   function     x000D    t cel   document getElementById  tblOne   getElementsByTagName  td    x000D    tc ln   t cel length  x000D    x000D  td  x000D  th   x000D    border  2px solid  aaa  x000D    x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt title gt Untitled lt  title gt  x000D     lt meta http-equiv  content-type  content  text html  charset iso-8859-1  gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt table id  tblOne  gt  x000D       lt tr gt  x000D         lt th style  border none   gt  lt  th gt  x000D         lt th gt onkeydown lt  th gt  x000D         lt th gt onkeyup lt  th gt  x000D         lt th gt onkeypress lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt th gt keyCode lt  th gt  x000D         lt td gt  amp nbsp  lt  td gt  x000D         lt td gt  amp nbsp  lt  td gt  x000D         lt td gt  amp nbsp  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt th gt charCode lt  th gt  x000D         lt td gt  amp nbsp  lt  td gt  x000D         lt td gt  amp nbsp  lt  td gt  x000D         lt td gt  amp nbsp  lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D     lt button onclick  for i 0 i lt tc ln i    t cel i  innerHTML   amp nbsp      gt CLEAR lt  button gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

This works for me    if code   112            alert  F1 was pressed              return false          F2 - 113   F3 - 114   F4 - 115  and so fort

User · Answer

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   gt        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

User · Answer

Try this solution if works   window onkeypress   function e        if   e which    e keyCode     116            alert  fresh

User · Answer

Wow it is very simple  i m blame to write this  why no one make it 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

User · Answer

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

User · Answer

You can do this with jquery like this               elemenId   keydown function  e                if e key     F12                    console log e key

User · Answer

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

User · Answer

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

User · Answer

One of the problems in trapping the F1-F12 keys is that the default function must also be overridden   Here is an example of an implementation of the F1  Help  key  with the override that prevents the default help pop-up   This solution can be extended for the F2-F12 keys   Also  this example purposely does not capture combination keys  but this can be altered as well    lt html gt   lt head gt   lt  -- Note   reference your JQuery library here -- gt   lt script type  text javascript  src  jquery-1 6 2 min js  gt  lt  script gt   lt  head gt   lt body gt       lt h1 gt F-key trap example lt  h1 gt       lt div gt  lt h2 gt Example   Press the  F1  key to open help lt  h2 gt  lt  div gt       lt script type  text javascript  gt            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    amp  amp                         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    amp  amp                         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                                      lt  script gt   lt  body gt   lt  html gt    I borrowed a similar solution from a related SO article in developing this   Let me know if this worked for you as well

User · Answer

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.

User · Answer

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      lt html gt    lt head gt    lt title gt Untitled lt  title gt    lt meta http-equiv  content-type  content  text html  charset iso-8859-1  gt    lt style type  text css  gt   td th border 2px solid  aaa     lt  style gt    lt script type  text javascript  gt   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       lt  script gt    lt  head gt    lt body gt    lt table id  tblOne  gt    lt tr gt    lt th style  border none   gt  lt  th gt  lt th gt onkeydown lt  th gt  lt th gt onkeyup lt  th gt  lt th gt onkeypress lt  td gt    lt  tr gt    lt tr gt    lt th gt keyCode lt  th gt  lt td gt  amp nbsp  lt  td gt  lt td gt  amp nbsp  lt  td gt  lt td gt  amp nbsp  lt  td gt    lt  tr gt    lt tr gt    lt th gt charCode lt  th gt  lt td gt  amp nbsp  lt  td gt  lt td gt  amp nbsp  lt  td gt  lt td gt  amp nbsp  lt  td gt    lt  tr gt    lt  table gt    lt button onclick  for i 0 i lt tc ln i    t cel i  innerHTML   amp nbsp      gt CLEAR lt  button gt    lt  body gt    lt  html gt    Here is a working demo so you can try it right here    x000D   x000D  var t cel  tc ln  x000D  if  document addEventListener      code for Moz x000D    document addEventListener  keydown   keyCapt  false   x000D    document addEventListener  keyup   keyCapt  false   x000D    document addEventListener  keypress   keyCapt  false   x000D    else   x000D    document attachEvent  onkeydown   keyCapt     code for IE x000D    document attachEvent  onkeyup   keyCapt   x000D    document attachEvent  onkeypress   keyCapt   x000D    x000D   x000D  function keyCapt e    x000D    if  typeof window event     undefined     x000D      e   window event    code for IE x000D      x000D    if  e type     keydown     x000D      t cel 0  innerHTML   e keyCode  x000D      t cel 3  innerHTML   e charCode  x000D      else if  e type     keyup     x000D      t cel 1  innerHTML   e keyCode  x000D      t cel 4  innerHTML   e charCode  x000D      else if  e type     keypress     x000D      t cel 2  innerHTML   e keyCode  x000D      t cel 5  innerHTML   e charCode  x000D      x000D    x000D  window onload   function     x000D    t cel   document getElementById  tblOne   getElementsByTagName  td    x000D    tc ln   t cel length  x000D    x000D  td  x000D  th   x000D    border  2px solid  aaa  x000D    x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt title gt Untitled lt  title gt  x000D     lt meta http-equiv  content-type  content  text html  charset iso-8859-1  gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt table id  tblOne  gt  x000D       lt tr gt  x000D         lt th style  border none   gt  lt  th gt  x000D         lt th gt onkeydown lt  th gt  x000D         lt th gt onkeyup lt  th gt  x000D         lt th gt onkeypress lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt th gt keyCode lt  th gt  x000D         lt td gt  amp nbsp  lt  td gt  x000D         lt td gt  amp nbsp  lt  td gt  x000D         lt td gt  amp nbsp  lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt th gt charCode lt  th gt  x000D         lt td gt  amp nbsp  lt  td gt  x000D         lt td gt  amp nbsp  lt  td gt  x000D         lt td gt  amp nbsp  lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D     lt button onclick  for i 0 i lt tc ln i    t cel i  innerHTML   amp nbsp      gt CLEAR lt  button gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

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   gt        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

User · Answer

My solution to this problem is   document onkeypress   function  event        event    event    window event       if  event keyCode    123              return false            With the magic number 123 which is the key F12

User · Answer

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.

User · Answer

Add a shortcut     Shortcuts add       type   down       mask   Ctrl A       handler  function             debug  Ctrl A                Start reacting to shortcuts     Shortcuts start      Add a shortcut to    another    list     Shortcuts add       type   hold       mask   Shift Up       handler  function             debug  Shift Up               list   another        Activate    another    list     Shortcuts start  another    Remove a shortcut    Shortcuts remove       type   hold       mask   Shift Up       list   another        Stop  unbind event handlers      Shortcuts stop       Tutorial  http   www stepanreznikov com js-shortcuts

User · Answer

This works for me    if code   112            alert  F1 was pressed              return false          F2 - 113   F3 - 114   F4 - 115  and so fort

User · Answer

Add a shortcut     Shortcuts add       type   down       mask   Ctrl A       handler  function             debug  Ctrl A                Start reacting to shortcuts     Shortcuts start      Add a shortcut to    another    list     Shortcuts add       type   hold       mask   Shift Up       handler  function             debug  Shift Up               list   another        Activate    another    list     Shortcuts start  another    Remove a shortcut    Shortcuts remove       type   hold       mask   Shift Up       list   another        Stop  unbind event handlers      Shortcuts stop       Tutorial  http   www stepanreznikov com js-shortcuts

User · Answer

Try this solution if works   window onkeypress   function e        if   e which    e keyCode     116            alert  fresh

User · Answer

When you use angular js for handling events  you should use ng-keydown for preventing pause in developer in chrome

User · Answer

When you use angular js for handling events  you should use ng-keydown for preventing pause in developer in chrome

User · Answer

One of the problems in trapping the F1-F12 keys is that the default function must also be overridden   Here is an example of an implementation of the F1  Help  key  with the override that prevents the default help pop-up   This solution can be extended for the F2-F12 keys   Also  this example purposely does not capture combination keys  but this can be altered as well    lt html gt   lt head gt   lt  -- Note   reference your JQuery library here -- gt   lt script type  text javascript  src  jquery-1 6 2 min js  gt  lt  script gt   lt  head gt   lt body gt       lt h1 gt F-key trap example lt  h1 gt       lt div gt  lt h2 gt Example   Press the  F1  key to open help lt  h2 gt  lt  div gt       lt script type  text javascript  gt            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    amp  amp                         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    amp  amp                         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                                      lt  script gt   lt  body gt   lt  html gt    I borrowed a similar solution from a related SO article in developing this   Let me know if this worked for you as well

User · Answer

Wow it is very simple  i m blame to write this  why no one make it 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

User · Answer

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.

User · Answer

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

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

Examples related to javascript

Examples related to jquery

Examples related to events

Examples related to keyboard

Examples related to keyboard-events