javascript - ejemplos - onkeypress html5

jQuery presionar tecla izquierda/derecha navegación

Question

Esta pregunta ya tiene una respuesta aquí:

• Binding arrow keys en JS / jQuery 16 respuestas

Quiero darle a mi control deslizante de contenido la capacidad de responder a la función de pulsación de tecla (tecla FLECHA IZQUIERDA y tecla FLECHA DERECHA). He leído sobre algunos conflictos entre varios navegadores y sistemas operativos.

El usuario puede navegar por el contenido mientras está en el sitio web global (cuerpo).

Pseudo Código:

ON Global Document
IF Key Press LEFT ARROW
THEN animate #showroom css ''left'' -980px
IF Key Press RIGHT ARROW
THEN animate #showroom css ''left'' +980px

Necesito una solución sin conflictos de cruce (navegadores, SO).

Answer 1

El uso de la expresión de funciones nombradas puede ayudar a mantener un código más limpio:

function go_left(){console.log(''left'');}
function go_up(){console.log(''up'');}
function go_right(){console.log(''right'');}
function go_down(){console.log(''down'');}
$(document).on(''keydown'',function(e){
var act={37:go_left, 38:go_up, 39:go_right, 40:go_down};
if(act[e.which]) var a=new act[e.which];
});

Answer 2

Esto funciona bien para mi :

$(document).keypress(function (e){
if(e.keyCode == 37) // left arrow
{
// your action here, for example
$(''#buttonPrevious'').click();
}
else if(e.keyCode == 39) // right arrow
{
// your action here, for example
$(''#buttonNext'').click();
}
});

Answer 3

Prefiero usar esta plantilla:

$(document).keypress(function(e){
switch((e.keyCode ? e.keyCode : e.which)){
//case 13: // Enter
//case 27: // Esc
//case 32: // Space
case 37: // Left Arrow
$("#showroom").animate({left: "+=980"});
break;
//case 38: // Up Arrow
case 39: // Right Arrow
$("#showroom").animate({left: "-=980"});
break;
//case 40: // Down Arrow
}
});

Answer 4

$("body").keydown(function(e) {
if(e.keyCode == 37) { // left
$("#showroom").animate({
left: "-=980"
});
}
else if(e.keyCode == 39) { // right
$("#showroom").animate({
left: "+=980"
});
}
});

Answer 5

$("body").keydown(function(e){
// left arrow
if ((e.keyCode || e.which) == 37)
{
// do something
}
// right arrow
if ((e.keyCode || e.which) == 39)
{
// do something
}
});