Detalles del tutorial
Tiempo aproximado de implementación: 15 min.
Dificultad: Básico.
Implementos necesarios:
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:
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.
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.
texto planocopiar codigoimprimir?
<!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):
texto planocopiar codigoimprimir?
$(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):
texto planocopiar codigoimprimir?
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:
