Crear un contador de caracteres (estilo Twitter)

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Seguro que te has parado a pensar en más de una ocasión cómo funciona el contador de caracteres de Twitter. Pues bien, implementarlo en tu página es mucho más sencillo de lo que pueda parecer.

Gracias al siguiente plugin jQuery conseguirás la misma función que utiliza Twitter dentro de las cajas para escribir un nuevo tweet, con la opción de alertar con la cantidad de caracteres restantes. De gran utilidad por ejemplo, para cajas de comentarios dentro de un blog.

Lo primero que conseguimos con este plugin es crear un elemento “sibling” que se añade seguido del elemento form que será el contador “counter“, que es donde se almacena la información de caracteres restantes. Cada vez que se rellena un campo, cambia la función “counter” y el elemento cambia en consecuencia. Por otro lado, si el número de caracteres restantes se acera a cero “warning” mediante una clase en nuestra hoja de estilos se cambiaría el color, por ejemplo, a números en amarillo y si el contador llega a cero o supera cero una nueva clase con estilo rojo, donde se muestra claramente que se ha excedido el límite de caracteres.

contador-de-caracteres

El siguiente es el código que genera el plugin:

<span class=”counter”>140</span>

Algunas de las opciones que ofrece el plugin son:

  • limit: 140: límite de caracteres que deseas setear para tu textarea o input.
  • 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.

El siguiente es el código por defecto:

$(“#mensaje1”).charCount();

Código personalizado para admitir 140 caracteres y alertar a falta de 25:

$(“#mensaje2”).charCount({
allowed: 140,
warning: 25,
counterText: ‘Caracteres restantes: ‘
});

Estilos CSS utilizados:

form .counter{
position:absolute;
right:0;
top:0;
font-size:20px;
font-weight:bold;
color:#ccc;
}
form .warning{color:#600;}
form .exceeded{color:#e00;}

Demostración

Sé la primera persona en comentar

Deja un comentario

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

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.