javascript - library - jquery keypress enter

Enlace de teclas de flecha en JS/jQuery

Question

¿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 (envuelve la función de enlace incorporada para agregar un argumento para reconocer teclas específicas), pero no parece admitir teclas de flecha.

Answer 1

¿Estás seguro de que jQuery.HotKeys no admite las teclas de flecha? He jugado con su demo antes y he observado que funcionan de 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 trasladado a Github: https://github.com/jeresig/jquery.hotkeys

Answer 2

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

Answer 3

Ejemplo de js puro con ir hacia la derecha o hacia la izquierda.

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

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

            }
        });

Answer 4

En lugar de utilizar return false; como en los ejemplos anteriores, puede usar e.preventDefault(); Lo que hace lo mismo pero es más fácil de entender y leer.

Answer 5

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

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

Answer 6

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 keyCode = e.keyCode || e.which,
      arrow = {left: 37, up: 38, right: 39, down: 40 };

  switch (keyCode) {
    case arrow.left:
      //..
    break;
    case arrow.up:
      //..
    break;
    case arrow.right:
      //..
    break;
    case arrow.down:
      //..
    break;
  }
});

Compruebe el ejemplo anterior here .

Answer 7

Puede verificar si una arrow key es presionada por:

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

Answer 8

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

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

Answer 9

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

Answer 10

Simplemente he combinado los mejores bits 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();
});

Answer 11

Una robusta biblioteca de Javascript para capturar entradas de teclado y 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
    }
});

Answer 12

Una solución concisa con 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;
    }
};

También vea https://.com/a/17929007/1397061 .

Answer 13

Vine aquí en busca de una forma sencilla 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: ahora lo hago en todo el sitio.

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

Answer 14

la flecha de prevención solo está disponible para cualquier otro objeto SELECCIONAR, bueno, en realidad no tengo pruebas 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 a la izquierda y la derecha para cambiar el valor del objeto SELECT usando "e.preventDefault ()" o "return false" en el evento "keydown" y "keyup" de "kepress" y "keyup", pero todavía cambia el valor del objeto. Pero el evento aún te dice que se presionó la flecha.

Answer 15

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

Ponga su código personalizado para las teclas de flecha entre el case correspondiente y las líneas de break .

e.which está normalizado por jQuery, por lo que funciona en todos los navegadores. Para un enfoque de javascript puro, reemplace las dos primeras líneas con:

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

(editar 2017)
Si te sientes elegante, puedes usar e.key lugar de e.which o e.keyCode ahora. e.key está convirtiendo en un estándar recomendado, lo que le permite verificar contra las cadenas: ''ArrowLeft'' , ''ArrowUp'' , ''ArrowRight'' , ''ArrowDown'' . Los nuevos navegadores lo soportan de forma nativa, e.key .

Answer 16

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

Códigos de caracteres:

37 - izquierda

38 - hasta

39 - cierto

40 - abajo