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:
-
<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:
-
$("#mensaje1").charCount();
Y esta es la implementación del plugin con algo de personalización:
-
$("#mensaje2").charCount({
-
allowed: 50,
-
warning: 20,
-
counterText: 'Caracteres restantes: '
-
});
Aquà podrán echar un vistazo al CSS utilizado en los demos:
-
form .counter{
-
position:absolute;
-
right:0;
-
top:0;
-
font-size:20px;
-
font-weight:bold;
-
color:#ccc;
-
}
-
form .warning{color:#600;}
-
form .exceeded{color:#e00;}
Aquà tienes una demo del plugin en funcionamiento.
También puedes descargar los archivos desde la página del autor.
Lunes, 1 de Marzo de 2010 a las 12.30
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...
Miércoles, 17 de Marzo de 2010 a las 19.45
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.
Lunes, 22 de Marzo de 2010 a las 16.52
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.
Lunes, 29 de Marzo de 2010 a las 12.28
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!
Martes, 30 de Marzo de 2010 a las 04.15
Muy Buen aporte, lo que estaba buscando... Un saludo a todo el equipo... Gracias!!
Miércoles, 7 de Abril de 2010 a las 14.21
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 =(
Sábado, 1 de Mayo de 2010 a las 14.16
O yo tengo dajavus cada vez que entro a este sitio o ustedes se fueron de vacaciones XD ¡Se extraña el blog!
Sábado, 15 de Mayo de 2010 a las 05.04
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 :/
Sábado, 12 de Junio de 2010 a las 13.12
como lo descargo espaar ver si me mete al habbok no mete:( ju *)(I)
Viernes, 16 de Julio de 2010 a las 16.01
Ya no van a actualizar el sitio?
Miércoles, 8 de Septiembre de 2010 a las 18.03
Ufff realmente utiles, descargue algunos querys y me han servido, mil gracias
Lunes, 29 de Noviembre de 2010 a las 19.38
oe pero cuando llege al 0 por que no puedo ahcerlo que ya no escriba . quien me ayuda!
Jueves, 23 de Diciembre de 2010 a las 15.02
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.
Sábado, 1 de Enero de 2011 a las 12.11
muy bueno el aporte, lo voy a probar...........