Este es un taller práctico sobre jQuery que esperamos sirva para que las personas puedan continuar aprendiendo la manera de crear sus propios plugins. Como ya sabemos, los plugins son una manera óptima de programar tus scripts jQuery, ya que permitirán solucionar sus necesidades y además crear código limpio y reutilizable.

En los dos artículos anteriores ya estuvimos hablando de los Plugins en jQuery y de las reglas fundamentales para desarrollarlos. También vimos un primer ejemplo de un plugin sencillo, que espero nos haya abierto las miras y dado una idea sobre las posibilidades de construcción de componentes para páginas web. En este artículo continuaremos ofreciendo ejemplos para reforzar lo aprendido y para que las personas puedan familiarizarse aun más con el modo de creación de plugins en jQuery.

El objetivo del ejemplo que ocupará este artículo es la creación de un plugin para conseguir que un campo textarea de formulario informe en todo momento de caracteres que ha escrito el usuario. Es decir, vamos a hacer un método del objeto jQuery que servirá para decirle a los campos de texto textarea que se expandan para convertirse en un textarea que cuente los caracteres en una capa de texto de al lado.

Para tener una idea exacta de nuestros objetivos podemos ver el ejemplo en marcha que vamos a desarrollar.

Entendamos el plugin textarea con contador de caracteres

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;
};

El código está comentado para que se pueda entender mejor. Quizás nos pueda llamar más la atención la línea donde se utiliza la función jQuery para generar sobre la marcha un objeto jQuery con el campo DIV con el que vamos a seguir la cuenta. Vemos que a través del método attr() accedemos al value del textarea y con la propiedad length a su longitud en caracteres.

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

Luego también puede que nos llame la atención el funcionamiento del método data(), que nos permite almacenar y recuperar datos que se guardarán en el propio objeto jQuery de cada textarea.

Así guardo una referencia al objeto con la capa contador en el textarea, en un dato llamado "campocontador".

elem.data("campocontador", contador);

Y con este otro código en el evento recupero esa capa, pues luego en el evento tengo que cambiar el contenido con la cuenta de caracteres actualizada.

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

Una vez creado el plugin, convierto todos los textareas en textareas-contador de caracteres, con este código:

$(document).ready(function(){
   $("textarea").cuentaCaracteres();
})

Eso es todo, pero quizás se vea más claro si vemos el código completo del ejemplo.

<html>
<head>
<title>Creando plugins en jQuery</title>
   <script src="../jquery-1.4.1.min.js"></script>
<script>

//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;
};
$(document).ready(function(){
   $("textarea").cuentaCaracteres();
})
</script>
   
</head>
<body>
<form>
      <textarea rows=5 cols=30 id="mitextarea">hola</textarea>
      <br>
      <br>
      <textarea rows=5 cols=30 id="otrotextarea">Otra cuenta...</textarea>
   </form>
</body>
</html>

Este ejemplo se puede ver en una página aparte.