Cada vez tenemos la necesidad de darle mas facilidades a los usuarios de nuestra aplicaciones para evitar errores nos controlados, y uno de ellos es limitar la cantidad de caracteres ingresados en una caja de texto, si bien en un textbox de una sola línea es muy fácil hacerlo con la propiedad MaxLenght en uno de tipo MultiLine ya no nos funciona.

Para solucionar el caso anterior tenemos dos opciones:

  1. Validar la cantidad de caracteres ingresados en el servidor, pero esto ocasionaría postbacks innecesarios
  2. Hacer uso de un lenguaje cliente como JavaScript.

Para este caso nos vamos a ir por la opción número 2, pero aunque existen en la Web muchos plugins que ya lo hacen, quiero aportar el mío, será la primera versión del mismo pero de a poco (sacare tiempo para irlo actualizando) le iré añadiendo nuevas funcionalidades.

En esta primera versión lo que hará el plugin es:

  • Mostrar el número de caracteres escritos en el cuadro de texto.
  • Permitir definir la cantidad máxima de caracteres permitidos.
  • Cuando el número de caracteres sea igual al máximo permitido el campo de texto tendrá un borde de color rojo para que el usuario se de cuenta que ha llegado al límite.

Pero como se verá el plugin?

Imagen1

Bueno peor ahora los pasos para hacer uso de el:

  1. Añadir a nuestro sitio dos librerías y referenciarlas en la página:

  2. La librería core de jQuery.

  3. La librería del plugin textcounter.
1: <scriptsrc="scripts/jquery-1.5.1.min.js"type="text/javascript">script> 2:

Entonces para utilizar el plugin la sintaxis sería:

1: $("selector").TextCounter(#MáximoDeCatacteres);

Como ven le decimos .TextCounter(#) y le enviamos el número máximo de caracteres que va a permitir la caja de texto.

Es un plugin muy fácil de usar, pero bastante práctico, como ven por el momento tiene pocas funciones pero lo iré actualizando.

Como siempre les dejo el código del ejemplo que contiene el plugin para que lo usen libremente:

Descarga el plugin !