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

5 comments

    1. Depende del textarea que estés usando. Si usas módulos como el TinyMCE, tienen su propio sistema de objetos sobre los que sacar el número de caracteres escrito. Por ejemplo: http://www.tinymce.com/wiki.php/TinyMCE3x:How_to_limit_number_of_characters/words

      De todos modos con texto enriquecido tienes que tener en cuenta que es probable que se añadan tags para enriquecer el texto, y claro, estos tags de HTML también son caracteres. Habría que contar el contenido dentro de los tags… es algo complicado quizá..

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s