Juan Manuel 25 de febrero de 2010 a las 08.00
   Imprimir artículo
elWebmaster.com

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


jquery-twitter-contadorCon 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).

jquery-twitter-contador2

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

  1. <span class="counter">140</span>

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:

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

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

  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:

  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.


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (14)

  1. César Cancino dice:

    Hola, muy buen script..felicitaciones..No s√© si te interesa, yo tengo otro hecho con js puro..te lo muestro en funcionamiento y si te gusta, me avisas y te env√≠o el c√≥digo…puedes verlo ac√° http://www.cesarcancino.com/contactos.php saludos…

  2. Juan dice:

    Muy buen post….

    Yo siempre he venido visitando el sitio… pero me he dado cuenta que ya no han publicado… que esta pasando…. este sitio es muy bueno… deben seguir adelante…

    Saludos cordiales.

  3. angel dice:

    Muy bueno. Todo lo que sea facilitarle al usuario las tareas, bienvenido sea. Cuantas veces me ha pasado, dar de alta en directorios web, y en el campo descripción pasarme de caracteres y enterarme cuando me da un error al validar.

  4. Adri dice:

    Gracias!

    Realmente interesante! Después faltaría implementar el código JavaScript que, en caso que superes los carácteres permitidos, y pulses enviar y te mande un mensaje y no deje procesar el texto.

    Saludos!

  5. David dice:

    Muy Buen aporte, lo que estaba buscando… Un saludo a todo el equipo… Gracias!!

  6. xRommelx dice:

    muy muy interesante y me esta siendo bastante util en este momento
    lastima que poco a cpoco EWM esta muriendo
    recuerdo como era 2 a√Īos atras =(

  7. Nicol√°s Metri dice:

    O yo tengo dajavus cada vez que entro a este sitio o ustedes se fueron de vacaciones XD ¬°Se extra√Īa el blog!

  8. Maxorchuck dice:

    Solo tengo una duda para que esta hecho la mayoria de los plugins ajaz y jquery porque me cuesta ponerlos en wordpress en cada archivo como el funtions, etc.. estarai bien que hagan una aclaración para que va dedicado el post porque aveces creo que se veria bien en wordpress pero he intentado con varios y no puedo :/

  9. marta dice:

    como lo descargo espaar ver si me mete al habbok no mete:( ju *)(I)

  10. Kevin dice:

    Ya no van a actualizar el sitio?

  11. Lomosaltado dice:

    Ufff realmente utiles, descargue algunos querys y me han servido, mil gracias

  12. maxhenrry dice:

    oe pero cuando llege al 0 por que no puedo ahcerlo que ya no escriba . quien me ayuda!

  13. Iv√°n dice:

    Hola, intento colocar el código en un form de asp.net y no aparece el contador. Tampoco logro darme cuenta de en qué parte del código está el contador. O debo instalar alguna cosa que me he comido? Los archivos js ya están incluidos en el proyecto. Gracias y saludos.

  14. angel dice:

    muy bueno el aporte, lo voy a probar………..

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder