jQuery

Contador de caracteres para Textarea al estilo Twitter con jQuery

(Ejemplo completo y funcional en. http://jsfiddle.net/4lberto/RNpMk/)

Como Twitter está de moda, en gran parte por su sistema de mensajes cortos, parece que muchas otras aplicaciones de la web 2.0 les gusta limitar las intervenciones de sus participantes. Así se evitan los comentarios interminables que no se lee nadie. Obliga a resumir.

En este sencillo ejemplo vamos a limitar la longitud del texto de un elemento textarea a un número determinado de caracteres. Además mostrará un contador con el número de caracteres que le restan. Si sigue escribiendo llegado el límite se le borrarán. Existen plugins para jQuery similares pero aquí vamos a hacerlo usando nuestras propias funciones sin tener que modificar apenas el código HTML.

Comenzamos definiendo en HTML un textarea y un elemento de texto para indicar el número de caracteres que tiene el textarea y los totales:


<p id="contadorTaComentario">0/140</p>
<textarea id="taComentario" rows="10" cols=""></textarea>

Nótese que el texto del contador por defecto corresponde a 0/140, es decir el valor inicial.

Ahora el Javascript. Usando jQuery.


function init_contadorTa(idtextarea, idcontador,max)
{
$("#"+idtextarea).keyup(function()
{
updateContadorTa(idtextarea, idcontador,max);
});

$("#"+idtextarea).change(function()
{
updateContadorTa(idtextarea, idcontador,max);
});

}

function updateContadorTa(idtextarea, idcontador,max)
{
var contador = $("#"+idcontador);
var ta =     $("#"+idtextarea);
contador.html("0/"+max);

contador.html(ta.val().length+"/"+max);
if(parseInt(ta.val().length)>max)
{
ta.val(ta.val().substring(0,max-1));
contador.html(max+"/"+max);
}

}​

La función principal que realiza el cálculo es updateContadorTa. Por su parte init_contadorTa se encarga de inicializar los eventos que vamos a asignar al textarea para que llame a la primera función y actualice el contador. Se hace así por que es necesario controlar el evento onkeyup y onchange: el primero para la introducción usando el teclado y la segunda para cuando se copia y pega.

Finalmente invocamos la función init_contador para cada textarea existente:


init_contadorTa("taComentario","contadorTaComentario", 140);

Indicamos en el primer parámetro el id del textarea que vamos a controlar. El segundo parámetro corresponde al id del elemento contador y finalmente el último parámetro es el número de caracteres permitidos en el textarea.

Puedes usar el ejemplo en: http://jsfiddle.net/4lberto/RNpMk/

 

Anuncios