jQuery – Contador de caracteres [Mi Plugin]

Posted on


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:

  • La librería core de jQuery.
  • La librería del plugin textcounter.
   1:  <script src="scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
   2:  <script src="scripts/jquery.jaTextCounter-1.0.js" type="text/javascript"></script>

2. Añadir la hoja de estilos y referenciarla:

   1:  <link href="TextCounter.css" rel="stylesheet" type="text/css" />

3. Vamos a añadir dos campos de texto,  la idea es que cada campo permita un número diferente de caracteres para ver su funcionalidad.

   1:  <asp:TextBox ID="txtCounter" runat="server" TextMode="MultiLine" Width="99%" Height="100px"></asp:TextBox>
   2:  <asp:TextBox ID="txtCounter2" runat="server" TextMode="MultiLine" Width="99%" Height="100px"></asp:TextBox>

4. Ahora que ya lo tenemos todo listo, vamos a crear nuestro “extenso” código jQuery:

   1:  <script type="text/javascript">
   2:      $(function () {
   3:          $("#<% = txtCounter.ClientID %>").TextCounter(20);
   4:          $("#<% = txtCounter2.ClientID %>").TextCounter(100);
   5:      })
   6:  </script>

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 !

Un comentario sobre “jQuery – Contador de caracteres [Mi Plugin]

    Johnd878 escribió:
    05/18/2014 en 19:51

    griseofulvin psoriasis cedgbfdkedde

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s