Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Realizar acción si se pulsa una tecla especifica

Estas en el tema de Realizar acción si se pulsa una tecla especifica en el foro de Frameworks JS en Foros del Web. Buenas, ¿Sabéis como hacer para que se ejecute una acción cuando se pulsa una tecla especifica? He logrado llegar hasta aquí... Sé capturar la tecla ...
  #1 (permalink)  
Antiguo 22/09/2010, 04:04
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 12 años, 10 meses
Puntos: 20
Realizar acción si se pulsa una tecla especifica

Buenas,

¿Sabéis como hacer para que se ejecute una acción cuando se pulsa una tecla especifica?

He logrado llegar hasta aquí... Sé capturar la tecla que se pulsa y como mostrar u ocultar una capa, sin embargo no consigo crear el if que falta

Si el usuario pulsa una tecla determinada del teclado, como por ejemplo la tecla "M" que muestre una capa que está oculta en el documento...

Código HTML:
Ver original
  1. <title>Trabajando con eventos de teclado en jQuery</title>
  2. <style type="text/css">
  3. #mostrar{
  4. display:none;
  5. background:yellow;
  6. height:100px;
  7. width:200px;
  8. }
  9. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  10. $(document).ready(function(){
  11.    $("html").keypress(function(e){
  12.       e.preventDefault();
  13.       $("#tecla-pulsada").html(e.which + ": " + String.fromCharCode(e.which))
  14.       // Si la tecla pulsada es la M muestra el texto
  15.       $("#mostrar").show("slow");
  16.    });
  17. })
  18. </head>
  19. <h1>Mostrar un texto al pulsar una tecla</h1>
  20. <p id="tecla-pulsada"></p>
  21. <div id="mostrar">Este texto aparecerá cuando se pulse la tecla B</b>
  22. </body>
  23. </html>

¿Podéis ayudarme?

Muchas gracias de antemano!
  #2 (permalink)  
Antiguo 22/09/2010, 05:53
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 12 años, 10 meses
Puntos: 20
Respuesta: Realizar acción si se pulsa una tecla especifica

Conseguida esa parte...

Código HTML:
Ver original
  1. <title>Trabajando con eventos de teclado en jQuery</title>
  2. <style type="text/css">
  3. #mostrar{
  4. display:none;
  5. background:yellow;
  6. height:100px;
  7. width:200px;
  8. }
  9. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  10. $(document).ready(function(){
  11.    $("html").keypress(function(e){
  12.       e.preventDefault();
  13.       $("#tecla-pulsada").html(e.which + ": " + String.fromCharCode(e.which))
  14.       if (String.fromCharCode(e.which)=='m'){
  15.         $("#mostrar").show("slow");
  16.       }else{
  17.         $("#mostrar").hide("slow")
  18.       }
  19.    });
  20. })
  21. </head>
  22. <h1>Mostrar un texto al pulsar una tecla</h1>
  23. <p id="tecla-pulsada"></p>
  24. <div id="mostrar">Este texto aparecerá cuando se pulse la tecla m</b>
  25. </body>
  26. </html>

Saludos!
  #3 (permalink)  
Antiguo 22/09/2010, 05:55
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 10 años, 1 mes
Puntos: 65
Respuesta: Realizar acción si se pulsa una tecla especifica

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  3.   <script>
  4.         $( function (){
  5.             $(document).keypress(function(e){
  6.                 switch(e.which)
  7.                 {
  8.                     case 97:  alert("Soy la A");
  9.                              break;
  10.                     case 101: alert("Soy la E");
  11.                              break;
  12.                     case 105: alert("Soy la I");
  13.                              break;
  14.                     case 111: alert("Soy la O");
  15.                              break;
  16.                     case 117: alert("Soy la U");
  17.                              break;
  18.                     default:  alert("No soy vocal");
  19.                 }
  20.             });
  21.         });
  22.   </script>
  23. </head>
  24.  
  25. </body>
  26. </html>
  #4 (permalink)  
Antiguo 22/09/2010, 06:01
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 12 años, 10 meses
Puntos: 20
Respuesta: Realizar acción si se pulsa una tecla especifica

El problema que veo es en Firefox detecta todas las teclas pulsadas incluso x ej. CRTL+F5 para recargar la pagina, lo cual hace imposible que se pueda recargar la pagina en Firefox cuando estoy en esa página. En IE no pasa (raro).

¿Se puede controlar este error? es decir, que solo detecte si se presiona ciertas teclas, y que no entre por ejemplo el CRTL+F5 (que no capture todas la teclas...)

¿Sabéis solucionarlo?

Muchas gracias de antemano!
  #5 (permalink)  
Antiguo 22/09/2010, 07:13
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 10 años, 1 mes
Puntos: 65
Respuesta: Realizar acción si se pulsa una tecla especifica

bueno tenes que comprobar si tiene pulsada el ctrl o el alt

para el ctrl = e.ctrlKey que devuelve un booleano
para el alt = e.altKey también un booleano

Código HTML:
Ver original
  1. $( function (){
  2.             $(document).keydown(function(e){
  3.                 if (e.ctrlKey){
  4.                     alert("control");
  5.                 }
  6.                 if (e.altKey){
  7.                     alert("alt");
  8.                 }
  9.             });
  10.         });


o usa este plugin http://plugins.jquery.com/project/hotkeys
  #6 (permalink)  
Antiguo 22/09/2010, 09:49
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 12 años, 10 meses
Puntos: 20
Respuesta: Realizar acción si se pulsa una tecla especifica

Cita:
Iniciado por Dany_s Ver Mensaje
bueno tenes que comprobar si tiene pulsada el ctrl o el alt

para el ctrl = e.ctrlKey que devuelve un booleano
para el alt = e.altKey también un booleano

Código HTML:
Ver original
  1. $( function (){
  2.             $(document).keydown(function(e){
  3.                 if (e.ctrlKey){
  4.                     alert("control");
  5.                 }
  6.                 if (e.altKey){
  7.                     alert("alt");
  8.                 }
  9.             });
  10.         });


o usa este plugin http://plugins.jquery.com/project/hotkeys
El problema al cual me refería lo solucioné así, comentando esas lineas :)

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.    $("html").keypress(function(e){
  3.       //e.preventDefault();
  4.       //$("#tecla-pulsada").html(e.which + ": " + String.fromCharCode(e.which))
  5.       if (String.fromCharCode(e.which)=='m'){
  6.         $("#mostrar").show("slow");
  7.       }else{
  8.         $("#mostrar").hide("slow")
  9.       }
  10.    });
  11. })

Etiquetas: especifica, realizar, tecla
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 13:15.