Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Leguim en 15 Marzo 2019, 00:57 am


Título: [Pregunta]: Detectar cuando se presiona determinada tecla
Publicado por: Leguim en 15 Marzo 2019, 00:57 am
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!

Título: Re: [Pregunta]: Detectar cuando se presiona determinada tecla
Publicado por: #!drvy en 16 Marzo 2019, 04:21 am
Con un addEventListener y el keycode correcto.

Código
  1. document.addEventListener('keyup', function(event){
  2.     if (event.keyCode && event.keyCode === 39) {
  3.         alert('Hola Mundo!');
  4.     }
  5. });

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

Saludos

Título: Re: [Pregunta]: Detectar cuando se presiona determinada tecla
Publicado por: Leguim en 16 Marzo 2019, 23:30 pm
Cita de: #!drvy en 16 Marzo 2019, 04:21 am
Con un addEventListener y el keycode correcto.

Código
  1. document.addEventListener('keyup', function(event){
  2.     if (event.keyCode && event.keyCode === 39) {
  3.         alert('Hola Mundo!');
  4.     }
  5. });

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
  1. document.addEventListener('keydown', function(event)
  2. {   
  3.     if(event.keyCode && event.keyCode == 37)
  4.     {
  5.         alert('mensaje 1');
  6.     }
  7.  
  8.     if(event.keyCode && event.keyCode == 39)
  9.     {
  10.      alert('mensaje 2');
  11.     }
  12.  
  13. });
  14.  

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)

Título: Re: [Pregunta]: Detectar cuando se presiona determinada tecla
Publicado por: EdePC en 17 Marzo 2019, 01:02 am
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
  1. document.addEventListener("keyup", function(e) {
  2.   if (e.key == "ArrowLeft") {
  3.     alert("Se ha presionado la tecla Flecha Izquierda");
  4.   }
  5.   if (e.key == "ArrowRight") {
  6.     alert("Se ha presionado la tecla Flecha Derecha");
  7.   }
  8.   if (e.key == "ArrowUp") {
  9.     alert("Se ha presionado la tecla Flecha Arriba");
  10.   }
  11.   if (e.key == "ArrowDown") {
  12.     alert("Se ha presionado la tecla Flecha Abajo");
  13.   }
  14. });

-- 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
  1. document.addEventListener("keyup", function(e) {
  2.   console.log("Usted a presionado la tecla: " + e.key);
  3.   console.log("Los detalles completos del evento son: ")
  4.   console.dir(e);
  5. });

Título: Re: [Pregunta]: Detectar cuando se presiona determinada tecla
Publicado por: #!drvy en 17 Marzo 2019, 04:03 am
Cita de: EdePC en 17 Marzo 2019, 01:02 am
- 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/


Citar
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


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines