Eventos del teclado en JQuery

jquery

jquery

Sean bienvenidos a un nuevo artículo de JQuery, en el capítulo anterior vimos como hacer uso de los eventos del mouse, así mismo vimos en otro artículo como hacer uso de selectores, en esta ocasión estudiaremos los eventos del teclado, los cuales debemos tener en cuenta debido a que la mayoría de información que ingresa a nuestras bases de datos y aplicaciones es por medio del teclado del usuario, sin más veamos los tipos de eventos y algunos ejemplos prácticos:

Eventos del Teclado

KeyPress: Este evento se desencadena al momento de realizar la pulsación de teclas sobre un componente, normalmente sobre componentes de ingreso de datos como campos de texto, ejemplo:

1
2
3
4
5
6
7
<input class="input" type="text" id="nombres"/>

<script type="text/javascript">
$("#nombres").keypress(function(tecla){
alert("Has pulsado al letra "+tecla.keyCode);
});
</script>

Nota: hay que tener en cuenta que este evento no se dispara con ciertas teclas como: ALT, CTRL, SHIFT, ESC.

KeyDown: Este evento se desencadena si y solo si cuando la tecla se halla pulsado, se diferencia del KeyPress en que este se ejecuta cuando el usuario ha pulsado y soltado una tecla, ejemplo:

1
2
3
4
5
6
7
8
<input class="input" type="text" id="nombres"/>

<p id="parrafo"></p>

<script type="text/javascript">
$("#nombres").keydown(function(){
$('#parrafo').html($('#nombres').val());
});</script>

Nota: Como podemos observar a medida que vamos escribiendo se va mostrando nuestro resultado en el párrafo con un pequeño retraso de una letra.

KeyUp: Este evento es uno de los mas usados, normalmente se utiliza cuando deseamos ir escribiendo y convirtiendo en mayúsculas el texto escrito, su particularidad es que se desencadena luego de soltar la tecla teniendo en cuenta que esta lógicamente ha de estar presionada, ejemplo:

1
2
3
4
5
6
7
8
9
<input class="input" type="text" id="nombres"/>

<p id="parrafo"></p>

<script type="text/javascript">
$("#nombres").keyup(function(){
$('#parrafo').html($('#nombres').val());
});
</script>

Nota: Ahora si vemos como los cambios se ven reflejados en nuestro párrafo de manera inmediata.

Finalmente podemos darnos cuenta una vez mas de las poderosas manipulaciones al DOM que podemos realizar con JQuery, puedes practicar haciendo uso de diferentes componentes, cajas de texto, text area, selectores de fechas, listas y comentar tus experiencias.

Como ultima observación puedes también obtener mayúsculas a minúsculas haciendo uso de CSS:

1
<input type="text" style="text-transform:lowercase"/>

Hasta pronto!.

Si este post fue de ayuda para ti, no olvides dejar un comentario, también puedes contar tu experiencia o lo que estés haciendo. Nos ayuda a seguir creciendo. ¡Vamos!, solo te llevará 1 minuto.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *