[Pregunta]: Detectar cuando se presiona determinada tecla

[Leguim]

Buena noches, como podría hacer que se detecte cuando se presiona la tecla (flecha derecha / arrow right) y al momento de tocarla aparezca un alert?

Gracias desde ya!

[#!drvy]

Con un addEventListener y el keycode correcto.

Código (javascript) [Seleccionar] Expandir

document.addEventListener('keyup', function(event){
   if (event.keyCode && event.keyCode === 39) {
       alert('Hola Mundo!');
   }
});

https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener
https://keycode.info/

Saludos

[Leguim]

Con un addEventListener y el keycode correcto.

Código (javascript) [Seleccionar] Expandir

document.addEventListener('keyup', function(event){
   if (event.keyCode && event.keyCode === 39) {
       alert('Hola Mundo!');
   }
});

https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener
https://keycode.info/

Saludos

Como podría hacer para que si se presiona otra tecla haga otra cosa, digamos si es la tecla flecha derecha pase eso, y si es la izquierda pase otra cosa, mande otro mensaje, etcétera. Yo probe con este código pero solo funciona si se hace con la tecla izuiqerda.

Código (javascript) [Seleccionar] Expandir


document.addEventListener('keydown', function(event)
{  
   if(event.keyCode && event.keyCode == 37)
   {
       alert('mensaje 1');
   }
   
   if(event.keyCode && event.keyCode == 39)
   {
    alert('mensaje 2');
   }

});


ACTUALIZO: El problema radica en que al tocar el boton la función que se llame sea cual sea, se ejecuta mas de 1 vez (2 veces, aveces 3 o 4 veces en un toque del boton)

[EdePC]

Saludos,

- Normalmente se usa "keyup" en lugar de "keydown" para evitarse el problema de la repetición del evento al mantener la tecla presionada.

- También es posible que te sea más legible utilizar los nombres propios de las teclas en lugar de los keyCode:

Código (javascript) [Seleccionar] Expandir

document.addEventListener("keyup", function(e) {
  if (e.key == "ArrowLeft") {
    alert("Se ha presionado la tecla Flecha Izquierda");
  }
  if (e.key == "ArrowRight") {
    alert("Se ha presionado la tecla Flecha Derecha");
  }
  if (e.key == "ArrowUp") {
    alert("Se ha presionado la tecla Flecha Arriba");
  }
  if (e.key == "ArrowDown") {
    alert("Se ha presionado la tecla Flecha Abajo");
  }
});

-- Recuerda que puedes ver los detalles de un objeto viendo la consola del navegador y usando console.log o console.dir para depurar tu código:

Código (javascript) [Seleccionar] Expandir

document.addEventListener("keyup", function(e) {
  console.log("Usted a presionado la tecla: " + e.key);
  console.log("Los detalles completos del evento son: ")
  console.dir(e);
});

[#!drvy]

- También es posible que te sea más legible utilizar los nombres propios de las teclas en lugar de los keyCode:

Si tienes que dar soporte a IE y Edge, mejor te las arreglas con los códigos.

https://caniuse.com/#search=event.key
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8860571/

KeyboardEvent.key values returned by Edge for arrow keys are Down, Left, Right, Up, which are non-standard as W3C specifies ArrowDown, ArrowLeft, ArrowRight, ArrowUp. Chrome and Firefox return standard values.

Saludos