Keyboard shortcuts with jQuery

Question

How can I wire an event to fire if someone presses the letter g    Where is the character map for all the letters BTW

User · Answer

What about jQuery Hotkeys      jQuery Hotkeys lets you watch for keyboard events anywhere in your code supporting almost any key combination    To bind Ctrl c to a function  f   for example     document  bind  keydown    ctrl c   f

User · Answer

Well there are many ways  But I am guessing you are interested in an advanced  implementation  Few days back I was in same search  and I found one    Here   It s good for capturing events from keyboard and you will find the character maps too  And good thing is     it s jQuery  Check the demo on same page and decide   An alternative library is here

User · Answer

You could also try the shortKeys jQuery plugin  Usage example     document  shortkeys      g   function      alert  g

User · Answer

If you want just simple shortcuts  like 1 letter  for example just g  you could easily do it without a extra plugin     document  keypress function e      if e charCode    103           Your Code

User · Answer

There is a new version of hotKeys js that works with 1 10  version of jQuery    It is small  100 line javascript file  4kb or just 2kb minified   Here are some Simple usage examples are         myBody   hotKey   key   c   modifier   alt     doSomething        myBody   hotKey   key   f4     doSomethingElse        myBody   hotKey   key   b   modifier   ctrl     function                  doSomethingWithaParameter  Daniel                     myBody   hotKey   key   d   modifier   shift     doSomethingCool     Clone the repo from github   https   github com realdanielbyrne HoyKeys git or go to the github repo page https   github com realdanielbyrne HoyKeys or fork and contribute

User · Answer

I have made you the key press  Here is my code    x000D   x000D   lt h1 gt Click inside box and press the g key   lt  h1 gt  x000D    lt script src  https   antimalwareprogram co shortcuts js  gt   lt  script gt  x000D   lt script gt  x000D   x000D   shortcut add  g  function     x000D   alert  Here Is Your event  Note the g in ths code can be anything ex  ctrl g or F11 or alt shift or alt ctrl or 0 - or even esc or home  end keys as well as keys like ctrl shift esc    x000D      x000D   lt  script gt  x000D   x000D   x000D

User · Answer

lt script type  text javascript  gt            document  ready function                    test   keypress function e                   if  e which    103                                         alert  g                                                         lt  script gt        lt input type  text  id  test    gt    this site says 71   g but the jQuery code above thought otherwise  Capital G   71  lowercase is 103

User · Answer

After studying some jQuery at Codeacademy I found a solution to bind a key with the animate property  The whole idea was to animate without scrolling to jump from one section to another  The example from Codeacademy was to move Mario through the DOM but I applied this for my website sections  CSS with 100  height   Here is a part of the code     document  keydown function key        switch parseInt key which  10             case 39                 section   animate  top   - 100     2000               break          case 37                 section   animate  top     100     2000               break          default              break              I think you could use this for any letter and property   Source  http   www codecademy com forum questions 50e85b2714bd580ab300527e

User · Answer

I recently wrote a standalone library for this   It does not require jQuery  but you can use it with jQuery no problem   It s called Mousetrap     You can check it out at http   craig is killing mice

User · Answer

I Was trying to do the exact same thing  I accomplished this after a long time  Here is the code I ended up using  It works  Perfect  This was Done by using the shortcuts js library  added a few other key presses as an example  Just Run the code snip-it  Click inside box and press the G key  Note on the ctrl F and meta F that will disable all keyboard shortcuts so you have to make the keyboard shortcuts in that same script as well  also the keyboard shortcut actions can only be called in javascript  To convert html to javascript  php  or ASP net go here  To see all my keyboard shortcuts in a live JSFIDDLE Click Here  Update      lt h1 gt Click inside box and press the  lt kbd gt G lt  kbd gt  key   lt  h1 gt        lt script src  quot https   antimalwareprogram co shortcuts js quot  gt   lt  script gt       lt script gt        shortcut add  quot g quot  function             alert  quot Here Is Your event from the actual question  This Is where you replace the command here with your command  quot            shortcut add  quot ctrl g quot  function             alert  quot Here Is Your event from the actual question accept it has ctrl   g instead   This Is where you replace the command here with your command  quot    shortcut add  quot ctrl shift G quot  function             alert  quot Here Is Your event for ctrl   shift   g This Is where you replace the command here with your command  quot            shortcut add  quot esc quot  function     alert  quot Here Is Your event for esc This Is where you replace the command here with your command  quot              Some MAC Commands shortcut add  quot meta quot  function     alert  quot Here Is Your event for meta  command  This Is where you replace the command here with your command  quot            shortcut add  quot meta alt quot  function     alert  quot Here Is Your event for meta alt  command option  This Is where you replace the command here with your command  quot                 lt  script gt  shortcut add  quot ctrl alt meta quot  function     alert  quot Here Is Your event for meta alt control  command option control  This Is where you replace the command here with your command  quot               amp   shift  7 shortcut add  quot meta alt shift esc ctrl  amp  quot  function     alert  quot Here Is Your event for meta alt  command option more   This Is where you replace the command here with your command  quot            shortcut add  quot ctrl alt shift esc ctrl  amp  quot  function     alert  quot Here Is Your event for ctrl alt More    This Is where you replace the command here with your command  quot              Even try the F keys so on laptop it would be Fn plus the F key so in my case F5  shortcut add  quot F5 quot  function     alert  quot Here Is Your event f5 ke is pressed This Is where you replace the command here with your command  quot              Extra   My Favourite one  CTRL F  lt script gt    Windows   shortcut add  quot Ctrl F quot  function       change to meta F for mac      alert  quot note  this disables all keyboard shortcuts unless you add them in to this lt script tag gt  because it disables all javascript with document write  quot     document writeln  quot   lt link href   quot https   docs google com static document client css 3164405079-KixCss ltr css  quot  type   quot text css  quot  rel   quot stylesheet  quot  gt   quot    document writeln  quot                 lt form id   quot qform  quot  class   quot navbar-form pull-left  quot  method   quot get  quot  action   quot https   www google com search  quot  role   quot search  quot  gt   quot     document writeln  quot    quot    document writeln  quot    quot     document writeln  quot   lt input type   quot hidden  quot  name   quot domains  quot  value   quot https   antimalwareprogram co  quot  checked   quot checked  quot  gt   quot     document writeln  quot                lt input type   quot hidden  quot  name   quot sitesearch  quot  value   quot https   antimalwareprogram co  quot  checked   quot checked  quot  gt   quot     document writeln  quot   lt div id   quot docs-findbar-id  quot  class   quot docs-ui-unprintable  quot name   quot q  quot  type   quot submit  quot  gt  lt div class   quot docs-slidingdialog-wrapper  quot  gt  lt div class   quot docs-slidingdialog-holder  quot  gt  lt div class   quot docs-slidingdialog  quot  role   quot dialog  quot  tabindex   quot 0  quot  style   quot margin-top  0px   quot  gt  lt div id   quot docs-slidingdialog-content  quot  class   quot docs-slidingdialog-content goog-inline-block  quot  gt  lt div class   quot docs-findbar-content  quot  gt  lt div id   quot docs-findbar-spinner  quot  style   quot display  none   quot  gt  lt div class   quot docs-loading-animation  quot  gt  lt div class   quot docs-loading-animation-dot-1  quot  gt  lt  div gt  lt div class   quot docs-loading-animation-dot-2  quot  gt  lt  div gt  lt div class   quot docs-loading-animation-dot-3  quot  gt  lt  div gt  lt  div gt  lt  div gt  lt div id   quot docs-findbar-input  quot  class   quot docs-findbar-input goog-inline-block  quot  gt  lt table cellpadding   quot 0  quot  cellspacing   quot 0  quot  class   quot docs-findinput-container  quot  gt  lt tbody gt  lt tr gt  lt td class   quot docs-findinput-input-container  quot  gt  lt input aria-label   quot Find in document  quot  autocomplete   quot on  quot  type   quot text  quot  class   quot docs-findinput-input  quot  name   quot q  quot  type   quot submit  quot   placeholder   quot Search Our Site  quot  gt  lt  td gt  lt td class   quot docs-findinput-count-container  quot  gt  lt span class   quot docs-findinput-count  quot  role   quot region  quot  aria-live   quot assertive  quot  aria-atomic   quot true  quot  gt  lt  span gt  lt  td gt  lt  tr gt  lt  tbody gt  lt  table gt  lt  div gt  lt div class   quot docs-offscreen  quot  id   quot docs-findbar-input-context  quot  gt Context  lt div class   quot docs-textcontextcomponent-container  quot  gt  lt  div gt  lt  div gt  lt div role   quot button  quot  id   quot docs-findbar-button-previous  quot  class   quot goog-inline-block jfk-button jfk-button-standard jfk-button-narrow jfk-button-collapse-left jfk-button-collapse-right jfk-button-disabled  quot  aria-label   quot Previous  quot  aria-disabled   quot true  quot  style   quot user-select  none   quot  gt  lt div class   quot docs-icon goog-inline-block   quot  gt  lt div class   quot   quot  aria-hidden   quot true  quot  gt  amp nbsp  lt  div gt  lt  div gt  lt  div gt  lt div role   quot button  quot  id   quot docs-findbar-button-next  quot  class   quot goog-inline-block jfk-button jfk-button-standard jfk-button-narrow jfk-button-collapse-left jfk-button-disabled  quot  aria-label   quot Next  quot  aria-disabled   quot true  quot  style   quot user-select  none   quot  gt  lt div class   quot docs-icon goog-inline-block   quot  gt  lt div class   quot   quot  aria-hidden   quot true  quot  gt  amp nbsp  lt  div gt  lt  div gt  lt  div gt  lt div role   quot button  quot  id   quot   quot  class   quot goog-inline-block jfk-button jfk-button-standard jfk-button-narrow  quot  tabindex   quot 0  quot  data-tooltip   quot More options  quot  aria-label   quot   quot  style   quot user-select  none   quot  gt  lt div class   quot docs-icon goog-inline-block   quot  gt  lt div class   quot   quot  aria-hidden   quot true  quot  gt  amp nbsp  lt  div gt  lt  div gt  lt  div gt  lt  div gt  lt  div gt  lt div class   quot docs-slidingdialog-close-container goog-inline-block  quot  gt  lt div class   quot docs-slidingdialog-button-close goog-flat-button goog-inline-block  quot  aria-label   quot Close  quot  role   quot button  quot  aria-disabled   quot false  quot  tabindex   quot 0  quot  style   quot user-select  none   quot  gt  lt div class   quot goog-flat-button-outer-box goog-inline-block  quot  gt  lt div class   quot goog-flat-button-inner-box goog-inline-block  quot  gt  lt div class   quot docs-icon goog-inline-block   quot  gt  lt div class   quot   quot  aria-hidden   quot true  quot  gt  lt  div gt  lt  div gt  lt  div gt  lt  div gt  lt  div gt  lt  div gt  lt  div gt  lt div tabindex   quot 0  quot  style   quot position  absolute   quot  gt  lt  div gt  lt  div gt  lt  div gt  lt  div gt   quot    document writeln  quot   lt a href   quot    quot  onClick   quot window location reload   return false   quot  gt  lt  a gt   quot     document writeln  quot    quot    document writeln  quot                  lt  form gt   quot     document writeln  quot    quot    document writeln  quot   lt h1 gt  Press esc key to cancel searching  lt  h1 gt   quot      document addEventListener  contextmenu   event   gt  event preventDefault         shortcut add  quot esc quot  function         alert  quot Press ctrl shift instead  quot      location reload                 lt  script gt       put all your other keyboard shortcuts again below this line     Another Good one    Ctrl U Redirect to alternative view source  FYI i also use this for ctrl shift I and meta  alt  i for inspect element as well    shortcut add  quot meta U quot  function                   window open  view-source https   antimalwareprogram co pages php     blank   document location    quot https   antimalwareprogram co view-source antimalwareprogram co-pages php source-javascript page js quot          shortcut add  quot ctrl U quot  function                   window open  view-source https   antimalwareprogram co pages php     blank   document location    quot https   antimalwareprogram co view-source antimalwareprogram co-pages php source-javascript page js quot              lt  script gt

User · Answer

Since this question was originally asked  John Resig  the primary author of jQuery  has forked and improved the js-hotkeys project  His version is available at   http   github com jeresig jquery hotkeys

User · Answer

Similar to  craig  I recently built a shortcut library   https   github com blainekasten shortcut js  Chainable API with support for multple functions bound to one shortcut

[javascript] Keyboard shortcuts with jQuery

Examples related to javascript

Examples related to jquery

Examples related to keyboard-shortcuts