elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Los 10 CVE más críticos (peligrosos) de 2020


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Pregunta]: Detectar cuando se presiona determinada tecla
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Pregunta]: Detectar cuando se presiona determinada tecla  (Leído 2,365 veces)
Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
[Pregunta]: Detectar cuando se presiona determinada tecla
« 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!


En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: [Pregunta]: Detectar cuando se presiona determinada tecla
« Respuesta #1 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


En línea

Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
Re: [Pregunta]: Detectar cuando se presiona determinada tecla
« Respuesta #2 en: 16 Marzo 2019, 23:30 pm »

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)
« Última modificación: 16 Marzo 2019, 23:51 pm por MiguelCanellas » En línea

EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.164



Ver Perfil
Re: [Pregunta]: Detectar cuando se presiona determinada tecla
« Respuesta #3 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. });
En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: [Pregunta]: Detectar cuando se presiona determinada tecla
« Respuesta #4 en: 17 Marzo 2019, 04:03 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
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

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