Entendamos el plugin textarea con contador de caracteres - I

Para hacer los textareas que cuenten caracteres nosotros queremos hacer algo como esto en jQuery.

$("textarea").cuentaCaracteres();

Con eso queremos conseguir que a todos los textareas del documento HTML les aparezca una información al lado con el número de caracteres que tenga el textarea escrito dentro. Esa cuenta de caracteres debe mostrarse nada más cargarse la página y actualizarse cuando se escriba algo dentro. Todo eso se automatizará, para que no tengamos que hacer nada, salvo la anterior llamada al plugin. Entonces, dentro del plugin tenemos que hacer varias cosas. 

1. Un bucle con each para recorrer todos los objetos que pueda haber en el objeto jQuery que reciba el método para activar este plugin. Este paso es igual en todos los plugins. 

2. Dentro de ese bucle podemos iterar con todos los elementos que haya en el objeto jQuery, que vamos a suponer son textareas. Vamos a crear un nuevo elemento DIV sobre la macha y vamos a iniciarlo con el texto de la cuenta de caracteres actual del textarea. Ese elemento creado "on the fly" lo añadiremos al cuerpo de la página, justo después de la etiqueta del textarea. 

3. Además, haremos un evento, para que cuando el usuario escriba algo en el textarea, el texto con la cuenta de caracteres se actualice automáticamente.

Estos tres pasos serían un resumen del funcionamiento del plugin, cuyo código completo podemos ver a continuación.

//creo el plugin cuentaCaracteres

jQuery.fn.cuentaCaracteres = function() {

//para cada uno de los elementos del objeto jQuery

this.each(function(){

//creo una variable elem con el elemento actual, suponemos un textarea

elem = $(this);

//creo un elemento DIV sobre la marcha

var contador = $('<div>Contador caracteres: ' + elem.attr("value").length + '</div>');

//inserto el DIV después del elemento textarea

elem.after(contador);

//guardo una referencia al elemento DIV en los datos del objeto jQuery

elem.data("campocontador", contador);

//creo un evento keyup para este elemento actual

elem.keyup(function(){

//creo una variable elem con el elemento actual, suponemos un textarea

var elem = $(this);

//recupero el objeto que tiene el elemento DIV contador asociado al textarea

var campocontador = elem.data("campocontador");

//modifico el texto del contador, para actualizarlo con el número de caracteres escritos

campocontador.text('Contador caracteres: ' + elem.attr("value").length);

});

});

//siempre tengo que devolver this

return this;

};