Limitar y contar caracteres de un textarea con jQuery

:: validaciones web ::

Muchas veces tendremos que limitar el número de caracteres escritos en un textarea y/o mostrar el numero de caracteres escritos en el textarea por el usuario a me dida que va escribiendo. Con el plugin jQuery que os presento a continuación podremos realizar ambas funciones, restringir el numero de caracteres y mostrar los caracteres introducidos por el usuario.



El plugin acepta en su configuración, valores que se le pueden pasar al hacer la llamada, el número de caracteres máximo permitido (por defecto 140), el texto que indica los carateres introducidos (por derfecto Caracteres) y estilos css para la etiqueta que mostrará el mensaje con el número de caracteres introducidos. Las llamadas al plugin se realizarian (teniendo previamente incluidos los ficheros jquery.js y jquery.jtextarea):

<script src="jquery.jtextarea.js"></script>
  <script>
    $(document).ready(function(){
        $(".jtextarea").jtextarea();
        $(".jtextarea").jtextarea({maxSizeElement: 30,
              cssElement: { display: "inline-block",color: "#660000",background: "#ffcc00"}});
  })
</script>

 Primero os pongo el código y a continuación una breve explicación del plugin, aunque en este post no es misión la explicación de plugins jQuery:

(function($) {
jQuery.fn.jtextarea = function(options) {
   //Default options
   var configuration = {
      maxSizeElement: 0,
      textElement: "Caracteres",
      cssElement: {
         display: "block",
         color: "#000000"
      }
   }
   jQuery.extend(configuration, options);

   this.each(function(){
      var elem = $(this);
      var counter_element = $('<br /><div class="textarea-message">' + configuration.textElement + ': ' + elem.attr("value").length + ' (m&aacute;ximmo '+configuration.maxSizeElement+')</div>');
      counter_element.css(configuration.cssElement);
      elem.after(counter_element);
      elem.data("counter_field", counter_element);
    
      elem.keydown(function(e){
          if (elem.attr("value").length>=configuration.maxSizeElement && configuration.maxSizeElement>0)
          {
             if (e.which!=8 && e.which!=37 && e.which!=38 && e.which!=46) { return false;}
          }
      });

      elem.keyup(function(){
         var counter_field = elem.data("counter_field");
         counter_field.text(configuration.textElement + ': ' + elem.attr("value").length+ ' (máximmo '+configuration.maxSizeElement+')');
      });
   });
   return this;
};
})(jQuery);

La explicación del plugin: en primer lugar se establecen las variable de configuración y sus valores por defecto.A continuación se crea el elemto counter_element, el cual será la capa que muestre el mensaje con los caracteres introducidos. Esta capa se mostrará a continuación de nuestro elemento textarea con elem.after(counter_element);. Seguidamente hiría el bloqueo de escritura, que compara el número de caracteres introducidos por el usuario con el limite de caracteres establecido.  

(NOTA: no se bloquea los caracteres via copiar-pegar, por lo que podría exceder del número de caracteres máximo permitido. Se podría ampliar el plugin para realizar la comprobación via copiar-pegar o establecer culaquier otro tipo de control para el textarea, por ejemplo: if($(".jtextarea").val().length>150){ ... })

Y el ejemplo en funcionamiento: