22 nov. 2012

Como crear un contador de caracteres jQuery

jQuery: Como crear un contador de caracteres

En este tutorial vamos a ver como crear un contador de caracteres utilizando jQuery.

Encuentro terriblemente útiles los contadores de caracteres puesto que a lo largo de mi jornada laboral me encuentro con la necesidad de elegir muy bien qué palabras debo utilizar según contextos, me explico:
  • Cuando necesito twitear algo importante y necesito emplear el mayor número de caracteres, suelo utilizar un contador para que me ayude a escoger correctamente los 140 caracteres que quiero publicar.
  • En los momentos que trabajo el SEO de alguna página web también consulto este tipo de herramientas, concretamente suelo emplear characterscounter.com pues además de contar caracteres  y palabras, me ofrece una herramienta que me indica el keyword density de mis textos además de indicarme la longitud idonea de mis titles y descriptions.
Existen muchos motivos de utilizar una herramienta de este tipo por lo que he decidido publicar  la función jQuery que realizar el conteo de caracteres:

$(".contador").each(function(){
   var longitud = $(this).val().length;
   $(this).parent().find('#longitud_textarea').html(''+longitud+' caracteres');
   $(this).keyup(function(){
      var nueva_longitud = $(this).val().length;
  $(this).parent().find('#longitud_textarea').html(''+nueva_longitud+' caracteres');
      if (nueva_longitud == "140") {
         $('#longitud_textarea').css('color', '#ff0000');
      }
   });
});