Diseño Web

Ξ 6 comentarios

Cómo crear un contador de caracteres para tus formularios

por Xabadu
Cómo crear un contador de caracteres para tus formularios

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.

Cómo crear un contador de caracteres para tus formularios

Detalles del tutorial

  • Tiempo aproximado de implementación: 15 min.
  • Dificultad: Básico.

toolsImplementos necesarios:

¿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:

HTML

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>

jQuery

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>');

});

});

CSS

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.

Comparte este tutorial

El culpable de todo esto

Las tardes gloriosas de domingo y las grandes ovaciones a estadio lleno, no son algo extraño para Xabadu. Luego de ser descubierto a los 4 años en un partido de barrio por los ojeadores del gran Aviación F.C., sacudió el mercado nacional al ser traspasado en $500 pesos chilenos (1 USD) y 3 coca colas al renombrado Estrella Blanca de Lolol. Luego de una impresionante carrera por equipos como Lozapenco, Santa Cruz, Deportivo Lago Chungará y una incursión en la 3a división del futbol de Kazajstan, su record imbatible hasta la fecha de 1257 goles en 20 partidos lo llevo a ser elegido como uno de los arqueros más recordados en la historia pelotera nacional. Una lesión en el colmillo superior derecho lo llevó al retiro el año 2003, pero está de vuelta y sin duda que su jerarquía y experiencia internacional será un gran aporte.

En los barrios marginales se le conoce como: Xabadu

Comentarios en Facebook

6 Comentarios

  • [...] 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 [...]

  • 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)
    :)

  • 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

  • Tambien pueden agregar:
    maxlength=”150″ en Textarea para que sea mas real :p es solo una opcion mas :)
    saludos y buen tutorial :D

  • 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

  • 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…



Deja un comentario

Ingresa con tu cuenta de Cómo Lo Hago

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Gente linda que nos quiere

Donde mas estamos