Detalles del tutorial
Implementos necesarios:
contador contador de caracteres HTML JQuery
Entre las tantas peticiones que nos han llegado ultimamente, una de las más recurrentes es sobre como crear un contador de caracteres para áreas de texto, similar a la funcionalidad que despliega Twitter en su sitio Web cada vez que enviamos una actualización (o tweet para nuestros amigos más 2.0). Pues bien, luego de analizarlo y darle un par de vueltas, pudimos notar que es una utilidad bastante sencilla de lograr mediante HTML y nuestro siempre querido jQuery.
Así que sin más, hoy mediante un sencillo y rápido tutorial, veremos el paso a paso para poder implementarlo en nuestros formularios.
El detalle, como siempre, después del salto.
Detalles del tutorial
- Tiempo aproximado de implementación: 15 min.
- Dificultad: Básico.
- jQuery.
- Un editor Web (recomendamos Aptana Studio o Notepad++).
¿Qué haremos?
Para llevar a cabo este contador de caracteres, partiremos por definir un pequeño formulario que contendrá un área de texto y un botón de envío para el mensaje.
Ahora, si pensamos en el proceso propiamente tal, la lógica nos dice que debemos estar atentos a cada caracter que escriba el usuario, y en base a eso, ir generando el contador para advertirle cuanto más puede escribir. Esto último es posible hacerlo de manera muy sencilla mediante un método de jQuery llamado keydown, el cual detecta cada vez que se presiona una tecla dentro de un elemento en particular (en este caso, el textarea).
Con eso claro, vamos, manos a la obra:
Partiremos por definir un formulario sencillo, con un área de texto y un botón de envío. Esto lo envolveremos en un div, el cual contendrá este formulario y adicionalmente otro pequeño div, que es donde incluiremos el mensaje indicando los caracteres que restan.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Ejemplo contador de caracteres - CLH</title> <link href="css/estilos.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/funciones.js"></script> </head> <body> <div id="container"> <h1>Escribe tu mensaje</h1> <form name="formulario" id="formulario" action="" method="post"> <label for="mensaje">Mensaje:</label> <textarea name="mensaje" id="mensaje" rows="10" cols="50"></textarea> <p><input type="submit" name="publicar" id="publicar" value="Publicar" /> </p> </form> <div id="contador"> </div> </div> </body> </html>
Ahora que tenemos nuestro formulario armado, crearemos el código en jQuery que será responsable de detectar la inclusión de cada nuevo caracter y procederá a descontar de una cantidad que definimos a modo de ejemplo (en este caso 150):
$(function(){
/* Definimos variables que utilizaremos
valor: En ella almacenaremos cuantos caracteres hay en el
área de texto.
contador: Almacenará el número de caracteres restantes,
descontando el valor actual desde el máximo (150).
parrafo: Almacenará en que tipo de clase (estilo) se mostrará el
mensaje (verde si no se ha pasado el límite, rojo si se
sobrepasado).
*/
var valor, contador, parrafo;
// Mostramos un mensaje inicial y lo añadimos al div de id contador.
$('<p class="indicador">Tienes 150 caracteres restantes</p>').appendTo('#contador');
// Definimos el evento para que detecte cada vez que se presione una tecla.
$('#mensaje').keydown(function(){
// Redefinimos el valor de contador al máximo permitido (150).
contador = 150;
/* Quitamos el párrafo con clase advertencia o indicador, en caso de que ya se
haya mostrado un mensaje */
$('.advertencia').remove();
$('.indicador').remove();
// Tomamos el valor actual del contenido del área de texto
valor = $('#mensaje').val().length;
// Descontamos ese valor al máximo.
contador = contador - valor;
/* Dependiendo de cuantos caracteres quedan, mostraremos el mensaje de una
u otra forma (lo definiremos a continuación mediante CSS */
if(contador < 0) {
parrafo = '<p class="advertencia">';
}
else {
parrafo = '<p class="indicador">';
}
// Mostramos el mensaje con el número de caracteres restantes.
$('#contador').append(parrafo + 'Tienes ' + contador + ' caracteres restantes</p>');
});
});
Y finalmente estilizamos un poco nuestro formulario y mensajes (esto último es opcional):
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
h1 {
font-size: 20px;
}
label {
display: block;
}
#mensaje {
padding: 5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#publicar {
border: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #999999;
padding: 10px;
font-weight: bold;
color: white;
}
#publicar:hover {
background: #666666;
cursor: pointer;
}
.advertencia {
color: red;
}
.indicador {
color: green;
}
Con esto obtendríamos nuestro contador de caracteres, el cual según se puede apreciar, es posible construirlo de manera sencilla, con solo algunas líneas de codificación y entregando una funcionalidad más que interesante para nuestros usuarios.
Antes de cerrar:
Y como siempre, les recordamos que este tutorial ha sido:
Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.
Esperamos que este tutorial haya sido de utilidad para Uds.
Muchas gracias por leer y será hasta una próxima oportunidad.
2:01:52 am
[…] This post was mentioned on Twitter by Como Lo Hago. Como Lo Hago said: Cómo crear un contador de caracteres para tus formularios: Entre las tantas peticiones que nos han llegado ultimam… http://bit.ly/9S0GDg […]
10:46:25 pm
Hay un pequeño detalle.
El valor de la funcion que valida debe ser “MENOR O IGUAL” a cero, porque si escribes 150 caracteres, te dice “te queda 1 caracter disponible”.
asi: http://img254.imageshack.us/img254/1756/snap00342.jpg
if(contador <= 0)
🙂
8:13:23 pm
me han sido de utilidad los consejos que encuentro en esta pagina, ahora podria ayudarme para hacer un contador de visitas para pagina web, utilizo el frontpage (htm) y el contador que le he puesto no avanza de 1.
gracias
3:55:44 am
Tambien pueden agregar:
maxlength=”150″ en Textarea para que sea mas real :p es solo una opcion mas 🙂
saludos y buen tutorial 😀
12:39:13 pm
Hola, esto se puede insertar dentro de una entrada de wodpress? o sea que los usuarios pueden contar los carácteres dentro del post.
Un saludo muchas gracias y buen trabajo
7:34:22 am
Sé que esto tiene mucho tiempo pero seguro que hay gente que aun busca info. En la línea 23 del código en js cambiaría KEYDOWN por KEYUP así se descontará la letra nada más introducirla…