Enlace de teclas de flecha en JS / jQuery


418

¿Cómo hago para vincular una función a las teclas de flecha izquierda y derecha en Javascript y / o jQuery? Miré el complemento js-hotkey para jQuery (ajusta la función de enlace incorporada para agregar un argumento para reconocer teclas específicas), pero no parece admitir teclas de flecha.


Respuestas:


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

Si necesita admitir IE8, inicie el cuerpo de la función como e = e || window.event; switch(e.which || e.keyCode) {.


(editar 2020)
Tenga en cuenta que KeyboardEvent.whichahora está en desuso. Vea este ejemplo utilizandoKeyboardEvent.key una solución más moderna para detectar teclas de flecha.


28
Con mucho, la mejor respuesta. Usos e.whichcomo los recomendados por jQuery para el navegador cruzado, los usos en e.preventDefault()lugar de return false( return falseen un controlador de eventos jQuery desencadena ambos e.preventDefault()y e.stopPropagation(), el segundo de los cuales hará que los eventos agregados posteriores fallen, ya que el evento no se propagará a ellos), y en el Al final del cambio, volverá sin llamar e.preventDefault()si se trata de una clave diferente a la que se está buscando para no obstaculizar el uso de otra clave, y en lugar de $.ui.keyCode.DOWNeso se compara con los números (MUCHO más rápido).
Jimbo Jonny

2
Nathan: parece que no todos los códigos de teclas son consistentes entre los navegadores, pero las teclas de flecha son algunas de las que sí lo son. Ver aquí: stackoverflow.com/questions/5603195/…
Sygmoral

1
@MichaelScheper - 1) variables! = Constantes, independientemente de si están destinadas a ser cambiadas ... el motor todavía tiene que tratarlas como vars hasta que las constantes ES6 sean lo suficientemente ubicuas como para que jQuery pueda usar constantes 2) los números no son realmente números mágicos cuando hay un comentario justo al lado de ellos que dice exactamente lo que son, y 3) ... continúa
Jimbo Jonny

2
... 3) cuando acceda a $.ui.keyCode.DOWNusted busque $en su ámbito léxico, no lo encuentre, suba un nivel ... busque $, repita hasta que esté en el ámbito global, encuéntrelo en el global window, acceda $en la ventana, acceda uien window.$, acceda keyCodeen window.$.ui, acceso DOWNen window.$.ui.keyCodellegar al valor primitivo desea comparar, a continuación, hacer su real comparando. Independientemente de si esa velocidad es importante para usted o no, es una decisión personal, tengo la tendencia de evitar 4 niveles de acceso cuando hay una situación en la que puedo escribir / comentar la primitiva con la misma facilidad.
Jimbo Jonny el

1
@NathanArthur Aquí encontré dos buenas herramientas en línea para probar los códigos de teclado: keycode.info asquare.net/javascript/tests/KeyCode.html unixpapa.com/js/key.html
Riccardo Volpe

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

Códigos de caracteres:

37 - izquierda

38 - arriba

39 - derecha

40 - abajo


44
¿Hay algún propósito para la devolución?
Alex S

19
Detiene cualquier otro evento de keydown que se golpee.
s_hewitt

99
Shadow: no, quiere decir que detiene el evento keydown de disparar sobre otros elementos DOM
JasonWoof

3
Excepto que 39 también es apóstrofe, ¿no?
Paul D. Waite

25
Cuando use jQuery, use en e.whichlugar de e.keyCodemás soporte para el navegador. Vea mi comentario a continuación.
Sygmoral

108

Puede usar el KeyCode de las teclas de flecha (37, 38, 39 y 40 para izquierda, arriba, derecha y abajo):

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

Consulte el ejemplo anterior aquí .


1
No estoy seguro acerca de su uso de || operador en la línea 2. ¿No es un valor distinto de cero o no específico de implementación específico y no está garantizado? Usaría algo más como: var keyCode = (e.keyCode? E.keyCode: e.which); +1 para el uso del objeto de flecha para dar a los casos nombres legibles.
Mnebuerquo

66
Si está utilizando jQuery, no necesita hacer una prueba de e.which: The event.which property normalizes event.keyCode and event.charCode- api.jquery.com/event.which
JCM

Estoy tratando de poner un detector de eventos clave en una mesa, pero no funcionaría. ¿Existe una cantidad limitada de tipos de selector que admiten escuchas de eventos clave?
Arman Bimatov

23

Esto es un poco tarde, pero HotKeys tiene un error muy importante que hace que los eventos se ejecuten varias veces si adjunta más de una tecla de acceso rápido a un elemento. Simplemente use jQuery simple.

$(element).keydown(function(ev) {
    if(ev.which == $.ui.keyCode.DOWN) {
        // your code
        ev.preventDefault();
    }
});

2
+1 para usar el objeto de código de clave ui. Mucho más fácil de entender que 37, 38, 39 o 40. No estoy seguro de por qué la respuesta principal es usar e.keyCode cuando la documentación de jQuery establece explícitamente que se debe usar e.que para tener en cuenta las diferencias del navegador. Esperemos que esta respuesta obtenga más reconocimiento por hacerlo bien.
Ninguno

2
Usar $ .ui.keyCode.DOWN en cada pulsación de tecla es MUCHO más lento que usar el número. Simplemente agregue un comentario si le preocupa la claridad, especialmente porque debe ejecutarse cada vez que se presiona una tecla.
Jimbo Jonny

16

Simplemente he combinado las mejores partes de las otras respuestas:

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

1
¿De dónde viene "ui"? Obteniendo "TypeError: $ .ui is undefined" EDIT - Me faltaba la interfaz de usuario de JQuery. Lo tengo cargado, no más errores.
un codificador

3
Aparentemente también está usando jQuery UI que debe tener esa enumeración. No incluiría jQuery UI solo por eso, por cierto.
Jethro Larson

14

Puedes usar KeyboardJS. Escribí la biblioteca para tareas como esta.

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

Verifique la biblioteca aquí => http://robertwhurst.github.com/KeyboardJS/


14

Una solución concisa que utiliza Javascript simple (gracias a Sygmoral por las mejoras sugeridas):

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            alert('left');
            break;
        case 39:
            alert('right');
            break;
    }
};

Consulte también https://stackoverflow.com/a/17929007/1397061 .


Probablemente también vale la pena vincular a través dedocument.addEventListener('keydown', myFunction);
nathanbirrell

9

¿Estás seguro de que jQuery.HotKeys no admite las teclas de flecha? He jugado con su demo antes y he observado que funcionaba a la izquierda, derecha, arriba y abajo cuando lo probé en IE7, Firefox 3.5.2 y Google Chrome 2.0.172 ...

EDITAR : Parece que jquery.hotkeys se ha reubicado en Github: https://github.com/jeresig/jquery.hotkeys


Estaba leyendo donde decía que estaba basado en otra biblioteca, y asumí que la lista de claves compatibles todavía se aplicaba.
Alex S


4

Ejemplo de js puro con ir a la derecha o izquierda

        window.addEventListener('keydown', function (e) {
            // go to the right
            if (e.keyCode == 39) {

            }
            // go to the left
            if (e.keyCode == 37) {

            }
        });

3

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

2

Puede verificar si arrow keyse presiona:

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

0

prevenir flecha solo disponible para cualquier otro objeto SELECT, bueno, en realidad no he probado en otro objeto LOL. pero puede detener el evento de flecha en la página y el tipo de entrada.

Ya trato de bloquear la flecha hacia la izquierda y hacia la derecha para cambiar el valor del objeto SELECT usando "e.preventDefault ()" o "return false" en el evento "keypress" y "keyup" pero aún cambia el valor del objeto. pero el evento aún te dice que se presionó la flecha.


0

Una robusta biblioteca Javascript para capturar la entrada del teclado y las combinaciones de teclas ingresadas. No tiene dependencias.

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

0

Vine aquí buscando una manera simple de permitir que el usuario, cuando se enfoca en una entrada, use las teclas de flecha para +1 o -1 una entrada numérica. Nunca encontré una buena respuesta, pero hice el siguiente código que parece funcionar muy bien, haciendo que todo este sitio ahora.

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

-1

Con café y 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()
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.