Binding arrow keys in JS jQuery

Question

How do I go about binding a function to left and right arrow keys in Javascript and or jQuery  I looked at the js-hotkey plugin for jQuery  wraps the built-in bind function to add an argument to recognize specific keys   but it doesn t seem to support arrow keys

User · Answer

A robust Javascript library for capturing keyboard input and key combinations entered. It has no dependencies.

http://jaywcjlove.github.io/hotkeys/

hotkeys('right,left,up,down', function(e, handler){
    switch(handler.key){
        case "right":console.log('right');break
        case "left":console.log('left');break
        case "up":console.log('up');break
        case "down":console.log('down');break
    }
});

User · Answer

A terse solution using plain Javascript  thanks to Sygmoral for suggested improvements    document onkeydown   function e        switch  e keyCode            case 37              alert  left                break          case 39              alert  right                break             Also see https   stackoverflow com a 17929007 1397061

User · Answer

document onkeydown   function e        switch e which            case 37     left         break           case 38     up         break           case 39     right         break           case 40     down         break           default  return     exit this handler for other keys           e preventDefault       prevent the default action  scroll   move caret       If you need to support IE8  start the function body as e   e    window event  switch e which    e keyCode       edit 2020  Note that KeyboardEvent which is now deprecated  See this example using KeyboardEvent key for a more modern solution to detect arrow keys

User · Answer

You can check wether an arrow key is pressed by     document  keydown function e       if  e keyCode  gt  36  amp  amp  e keyCode  lt  41            alert   arrowkey pressed            return false

User · Answer

Instead of using return false  as in the examples above  you can use e preventDefault    which does the same but is easier to understand and read

User · Answer

I came here looking for a simple way to let the user  when focused on an input  use the arrow keys to  1 or -1 a numeric input  I never found a good answer but made the following code that seems to work great - making this site-wide now      input   bind  keydown   function  e        if e keyCode    40  amp  amp    isNumeric   this  val                  this  val parseFloat   this  val   -1 0         else if e keyCode    38   amp  amp    isNumeric   this  val                   this  val parseFloat   this  val    1 0

User · Answer

This is a bit late  but HotKeys has a very major bug which causes events to get executed multiple times if you attach more than one hotkey to an element   Just use plain jQuery     element  keydown function ev        if ev which      ui keyCode DOWN               your code         ev preventDefault

User · Answer

prevent arrow only available for any object else SELECT  well actually i haven t tes on another object LOL  but it can stop arrow event on page and input type   i already try to block arrow left and right to change the value of SELECT object using  e preventDefault    or  return false  on  kepress   keydown  and  keyup  event but it still change the object value  but the event still tell you that arrow was pressed

User · Answer

You can use jQuery bind     window  bind  keydown   function e       if  e keyCode    37            console log  left          else if  e keyCode    38            console log  up          else if  e keyCode    39            console log  right          else if  e keyCode    40            console log  down

User · Answer

I ve simply combined the best bits from the other answers     document  keydown function e       switch e which            case   ui keyCode LEFT             your code here         break           case   ui keyCode UP             your code here         break           case   ui keyCode RIGHT             your code here         break           case   ui keyCode DOWN             your code here         break           default  return     allow other keys to be handled               prevent default action  eg  page moving up down         but consider accessibility  eg  user may want to use keys to choose a radio button      e preventDefault

User · Answer

You can use KeyboardJS  I wrote the library for tasks just like this   KeyboardJS on  up   function     console log  up        KeyboardJS on  down   function     console log  down        KeyboardJS on  left   function     console log  right        KeyboardJS on  right   function     console log  left          Checkout the library here    http   robertwhurst github com KeyboardJS

User · Answer

document  keydown function e       if  e which    37            alert  left pressed           return false              Character codes      37 - left      38 - up      39 - right      40 - down

User · Answer

With coffee  amp  Jquery      document  on  keydown    e  - gt      switch e which       when 37 then console log  left key         when 38 then console log  up key         when 39 then console log  right key         when 40 then console log  down key       e preventDefault

User · Answer

Are you sure jQuery HotKeys doesn t support the arrow keys  I ve messed around with their demo before and observed left  right  up  and down working when I tested it in IE7  Firefox 3 5 2  and Google Chrome 2 0 172     EDIT  It appears jquery hotkeys has been relocated to Github  https   github com jeresig jquery hotkeys

User · Answer

You can use the keyCode of the arrow keys  37  38  39 and 40 for left  up  right and down        selector   keydown function  e      var arrow     left  37  up  38  right  39  down  40       switch  e which        case arrow left                   break      case arrow up                   break      case arrow right                   break      case arrow down                   break            Check the above example here

User · Answer

Example of pure js with going right or left          window addEventListener  keydown   function  e                   go to the right             if  e keyCode    39                                  go to the left             if  e keyCode    37

[javascript] Binding arrow keys in JS/jQuery

Examples related to javascript

Examples related to jquery

Examples related to keyboard

Examples related to key-bindings