A través de la propiedad which del objeto evento de jQuery podemos saber qué tecla ha sido pulsada cuando se produce el
evento de teclado. Esta propiedad contiene un número entero con el código Unicode de la tecla pulsada. Haremos un
ejemplo para explicarlo.
Tenemos un textarea y escribiendo algo en él, mostraremos la tecla pulsada en una capa, independiente del textarea. Este
será el código HTML que necesitaremos para el ejemplo:
<form>
<textarea cols=300 rows=2 id="mitexto">Escribe algo aquí!</textarea>
<br>
<b>Tecla pulsada:</b>
<br>
<div id="loescrito"></div>
</form>
Ahora definiremos con jQuery el evento keypress, para mostrar la tecla pulsada.
$("#mitexto").keypress(function(e){
e.preventDefault();
$("#loescrito").html(e.which + ": " + String.fromCharCode(e.which));
});
Con e.preventDefault(); hacemos que no se escriba nada en el textarea, osea, estamos inhibiendo el comportamiento
habitual del evento, que es escribir las teclas en el textarea, que no tiene mucho que ver con nuestro ejemplo, pero que está
bien para ver cómo funciona.
Luego escribimos en la capa con id "loescrito" el código de Unicode de esa tecla y luego su conversión a un carácter normal,
a través de la función estática de la clase String fromCharCode().
El código completo del ejercicio es el siguiente.
<html>
<head>
<title>Trabajando con eventos de teclado en jQuery</title>
<script src="../jquery-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
$("#mitexto").keypress(function(e){
e.preventDefault();
$("#loescrito").html(e.which + ": " + String.fromCharCode(e.which))
});
})
</script>
</head>
<body>
<h1>Eventos de teclado en jQuery</h1>
<h2>Averiguar qué tecla se está pulsando</h2>
<form>
<textarea cols=300 rows=2 id="mitexto">Escribe algo aquí!</textarea>
<br>
<b>Tecla pulsada:</b>
<br>
<div id="loescrito"></div>
</form>
</body>
</html>
<html>
<head>
<title>Trabajando con eventos de teclado en jQuery</title>
<script src="../jquery-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
$("#mitexto").keypress(function(e){
e.preventDefault();
$("#loescrito").html(e.which + ": " + String.fromCharCode(e.which))
});
})
</script>
</head>
<body>
<h1>Eventos de teclado en jQuery</h1>
<h2>Averiguar qué tecla se está pulsando</h2>
<form>
<textarea cols=300 rows=2 id="mitexto">Escribe algo aquí!</textarea>
<br>
<b>Tecla pulsada:</b>
<br>
<div id="loescrito"></div>
</form>
</body>
</html>
Podemos ver el ejemplo en marcha en una página aparte.
Con esto habremos aprendido ya a manejar eventos de teclado, aunque os recomendamos experimentar vosotros mismos
con este tipo de eventos modificando el script y ver nuestro Videotutorial: manejo de eventos al detalle en jQuery .
No hay comentarios:
Publicar un comentario