Eventos de jQuery: Eventos de teclado

jQuery

Eventos de jQuery

Los navegadores pueden seguir el uso del teclado del usuario. Esto te permite asignar comandos a ciertas teclas o que las visitas puedan controlar un script presionando una o varias teclas. En este post explicaré los diferentes eventos de teclado que ofrece jQuery.

Evento keypress

Se acciona cada vez que se presiona una tecla incluyendo si la mantienes presionada. De hecho, de mantener una tecla pulsada dispara el evento una y otra vez hasta que la sueltes. Este evento es ideal para saber si el usuario mantiene una tecla pulsada.

JavaScript
1
2
3
4
5
6
7
8
<script>
i = 0;
$(document).ready(function(){
    $("input").keypress(function(){
        $("#contador").text(i += 1);
    });
});
</script>

XHTML
1
2
3
Introduce un texto: <input type="text">
 
<p>Nº de veces que Keypress se ha disparado: <span id="contador">0</span></p>

Sin embargo, también es buena idea saber que tecla ha pulsado el usuario

JavaScript
1
2
3
4
5
6
7
8
<script>
i = 0;
$(document).ready(function(){
    $("input").keypress(function(tecla){
        $("#contador").text(String.fromCharCode(tecla.which));
    });
});
</script>

XHTML
1
<p>Última tecla que has pulsado: <span id="contador"></span></p>

La función keypress pasa como parámetro tecla que sería el keycode de la tecla pulsada. Como queremos saber la tecla, empleo la función fromCharCode para mostrarlo como una letra.

Aunque parezca curioso, cada navegador controla el teclado de una manera diferente, esto llega a dificultar saber que letra se ha introducido. Y aquí entra el which, esta propiedad que ofrece jQuery permite saber de forma fiable el keycode de la tecla pulsada.

Evento keydown

Es similar al keypress, se dispara cuando presionas una tecla. Sin embargo, se ejecuta justo antes del evento keypress. En navegadores como Opera, el evento sólo se dispara una vez pero, en otros se comporta exactamente igual que keypress.

Evento keyup

Sería el contrario de las anteriores, se ejecuta cuando se suelta una tecla. De la misma manera que keypress, podemos saber qué tecla se ha soltado.

JavaScript
1
2
3
4
5
6
7
8
<script>
i = 0;
$(document).ready(function(){
   $("input").keyup(function(tecla){
     $("#contador").text(String.fromCharCode(tecla.which));
   });
});
</script>

XHTML
1
<p>Tecla soltada: <span id="contador"></span></p>

Y hasta aquí los eventos de teclado en jQuery, espero que os haya gustado. A seguir picando 🙂