jQuery: crear un contador de caracteres para un textarea (estilo Twitter) Muy simple

Con un plugin de jQuery podremos lograr la misma funcionalidad que utiliza Twitter en sus cajas de texto, alertando (con cada modificación del texto ingresado) la cantidad de caracteres restantes.

Imagina que al escribir un mensaje, de pronto, se terminan los caracteres disponibles. Si lo hubieses sabido antes habrías sido más sintético. Aprende cómo mejorar la usabilidad en este aspecto.

Cómo funciona

La primera cosa que este plugin hace es crear un elemento hermano ("sibling", que se añade inmediatamente después del elemento form), que será el contador ("counter"), donde se almacena la información de caracteres restantes.

En cada evento en que se presiona una tecla o el valor de campo de texto cambia la función de conteo se dispara y el contenido de este elemento contador se cambia en consecuencia.

Si el recuento de caracteres restantes llega al "warning" (se acerca a cero) una clase de CSS es añadida. Esta clase lo que hará es cambiar el color de la información del contador de caracteres (por ejemplo, pondrá los números en amarillo). Si el contador llega a cero y va más allá, se añade otra clase por lo que podemos utilizar otro estilo para el límite excedido (de nuevo, por ejemplo, color rojo).



Sólo para que puedas entenderlo un poco mejor, este es el código que el plugin genera por defecto:

PLAIN TEXT

1. class="counter">140

Opciones del plugin (y valores por defecto)

limit: 140

El límite de caracteres que deseas setear para tu textarea o input. Debe ser un número.

warning: 25

Cuando los caracteres restantes llegan al número seteado con esta opción la clase css de nombre "warning" se aplicará al elemento contador.

counterElement: 'span'

El tipo de elemento que deseas inyectar en el DOM como contador. Por defecto, es un elemento SPAN, pero puedes utilizar p, div, etc.

css: 'counter'

Nombre de clase añadida al contador. Utiliza esta clase como un selector de css para cambiar la apariencia del elemento.

cssWarning: 'warning'

Nombre de clase añadida al contador una vez que se llega al número de "advertencia" (warning).

cssExceeded: 'exceeded'

Nombre de la clase añadida al elemento contador una vez que llega a cero.

counterText: ''

Si deseas añadir algún texto al número de caracteres restantes, lo puedes hacer utilizando esta opción. Por defecto se encuentra vacía.

Así es como luce el código de implementación por defecto:

PLAIN TEXT

1. $("#mensaje1").charCount();

Y esta es la implementación del plugin con algo de personalización:

PLAIN TEXT

1. $("#mensaje2").charCount({
2. allowed: 50,
3. warning: 20,
4. counterText: 'Caracteres restantes: '
5. });

Aquí podrán echar un vistazo al CSS utilizado en los demos:

PLAIN TEXT

1. form .counter{
2. position:absolute;
3. right:0;
4. top:0;
5. font-size:20px;
6. font-weight:bold;
7. color:#ccc;
8. }
9. form .warning{color:#600;}
10. form .exceeded{color:#e00;}

Aquí tienes una demo del plugin en funcionamiento.

También puedes descargar los archivos desde la página del autor.