Realizar acción si se pulsa una tecla especifica

neodani · #1 (**permalink**) 22/09/2010, 03:04

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<html>
<head>
<title>Trabajando con eventos de teclado en jQuery</title>
<style type="text/css">
#mostrar{
display:none;
background:yellow;
height:100px;
width:200px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("html").keypress(function(e){
      e.preventDefault();
      $("#tecla-pulsada").html(e.which + ": " + String.fromCharCode(e.which))
      // Si la tecla pulsada es la M muestra el texto
      $("#mostrar").show("slow");
   });
})
</script>
</head>
<body>
<h1>Mostrar un texto al pulsar una tecla</h1>
<p id="tecla-pulsada"></p>
<div id="mostrar">Este texto aparecerá cuando se pulse la tecla B</b>
</body>
</html>

¿Podéis ayudarme?

Muchas gracias de antemano!

neodani · #2 (**permalink**) 22/09/2010, 04:53

Conseguida esa parte...

Código HTML:

Ver original<html>
<head>
<title>Trabajando con eventos de teclado en jQuery</title>
<style type="text/css">
#mostrar{
display:none;
background:yellow;
height:100px;
width:200px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("html").keypress(function(e){
      e.preventDefault();
      $("#tecla-pulsada").html(e.which + ": " + String.fromCharCode(e.which))
      if (String.fromCharCode(e.which)=='m'){
        $("#mostrar").show("slow");
      }else{
        $("#mostrar").hide("slow")
      }
   });
})
</script>
</head>
<body>
<h1>Mostrar un texto al pulsar una tecla</h1>
<p id="tecla-pulsada"></p>
<div id="mostrar">Este texto aparecerá cuando se pulse la tecla m</b>
</body>
</html>

Saludos!

Dany_s · #3 (**permalink**) 22/09/2010, 04:55

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script>
        $( function (){
            $(document).keypress(function(e){
                switch(e.which)
                {
                    case 97:  alert("Soy la A");
                             break;
                    case 101: alert("Soy la E");
                             break;
                    case 105: alert("Soy la I");
                             break;
                    case 111: alert("Soy la O");
                             break;
                    case 117: alert("Soy la U");
                             break;
                    default:  alert("No soy vocal");
                }
            });
        });
  </script>
</head>
<body>
 
</body>
</html>

neodani · #4 (**permalink**) 22/09/2010, 05:01

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!

Dany_s · #5 (**permalink**) 22/09/2010, 06:13

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$( function (){
            $(document).keydown(function(e){
                if (e.ctrlKey){
                    alert("control");
                }
                if (e.altKey){
                    alert("alt");
                }
            });
        });

o usa este plugin http://plugins.jquery.com/project/hotkeys

neodani · #6 (**permalink**) 22/09/2010, 08:49

Cita:

Iniciado por Dany_s

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$( function (){
            $(document).keydown(function(e){
                if (e.ctrlKey){
                    alert("control");
                }
                if (e.altKey){
                    alert("alt");
                }
            });
        });

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$(document).ready(function(){
   $("html").keypress(function(e){
      //e.preventDefault();
      //$("#tecla-pulsada").html(e.which + ": " + String.fromCharCode(e.which))
      if (String.fromCharCode(e.which)=='m'){
        $("#mostrar").show("slow");
      }else{
        $("#mostrar").hide("slow")
      }
   });
})