Binding arrow keys in JS/jQuery

问题:

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.

回答1:

$(document).keydown(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)
});

Put your custom code for the arrow keys between the corresponding case and break lines.

e.which is normalized by jQuery, so it works in all browsers. For a pure javascript approach, replace the first two lines with:

document.onkeydown = function(e) {
    e = e || window.event;
    switch(e.which || e.keyCode) {

(edit 2017)
If you feel fancy, you can use e.key instead of e.which or e.keyCode now. e.key is becoming a recommended standard, allowing you to check against strings: \'ArrowLeft\', \'ArrowUp\', \'ArrowRight\', \'ArrowDown\'. New browsers support it natively, check here.

回答2:

$(document).keydown(function(e){
    if (e.which == 37) { 
       alert(\"left pressed\");
       return false;
    }
});

Character codes:

37 - left

38 - up

39 - right

40 - down

回答3:

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.

回答4:

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

回答5:

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

回答6:

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/

回答7:

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.

回答8:

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

回答9:

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.

回答10:

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

            }
        });

回答11:

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\');
    }
});

回答12:

You can check wether an arrow key is pressed by:

$(document).keydown(function(e){
    if (e.keyCode > 36 && e.keyCode < 41) { 
       alert( \"arrowkey pressed\" );
       return false;
    }
});

回答13:

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.

回答14:

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

回答15:

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 && $.isNumeric($(this).val()) ) {
        $(this).val(parseFloat($(this).val())-1.0);
    } else if(e.keyCode == 38  && $.isNumeric($(this).val()) ) { 
        $(this).val(parseFloat($(this).val())+1.0);
    }
}); 

回答16:

With coffee & Jquery

  $(document).on \'keydown\', (e) ->
    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()