1.5 El evento keypress.

Uno de los eventos que me han resultado de mayor utilidad es el evento Keypress de Jquery ya que lo he utilizado para controlar la cantidad de caracteres que tendrá un determinado campo de texto. Keypress es el evento que sucede mientras es usuario esta introduciendo texto dentro de un campo de texto. Para utilizarlo supongamos que tenemos un campo de texto con las siguientes características:

<input type="text" size="30" class="campoBusqueda"/>

Ahora supongamos que deseamos que este campo de texto tenga un límite de caracteres de 100, entonces podríamos implementar el siguiente código en jquery:

$(document).ready(function(){
$(".campoBusqueda").keypress(function(evento){
var largo=$(".campoBusqueda").attr("value").length;
if(largo==100){
evento.preventDefault();
}
});
});

El código consiste en lo siguiente:
• La primera parte $(document).ready(function(){}); sirve para indicar que jquery va a esperar a que se termine de cargar todo el código HTML para que se ejecute.
• La segunda parte $(".campoBusqueda").keypress(function(evento){}); sirve para indicar el código que se ejecutará cada vez que el usuario ingrese un carácter o espacio dentro de la caja de texto. Evento es el manejador del evento, es decir, hace referencia a la acción del usuario cuando este ingresa un carácter.
• La tercera parte var largo=$(".campoBusqueda").attr("value").length; sirve para obtener la cantidad de caracteres del campo de texto mediante el uso de la propiedad .length, el método .attr() de Jquery lo explico más adelante.
• La última parte
if(largo==100){
evento.preventDefault();
}
sirve para evaluar la cantidad de caracteres; preventDefault();es un método de javascript que interrumpe el evento que se este llevando a cabo, en este caso la introducción del texto.Ahora para entender un poco más fácil el evento .keypress, supongamos que deseamos que simplemente al introducir texto en una determinada caja de texto deseamos que nos aparezca un mensaje "Has introducido un carácter", la caja de texto es la siguiente:

<input type="text" size="30" class="campoBusqueda"/>

Entonces el código JQuery necesario seria como sigue:

$(document).ready(function(){
$(".campoBusqueda").keypress(function(){
alert("Has introducido un carácter");
});
});