06Oct 2011 9 Comments */?>

Plugin jQuery para limitar caracteres en un campo de texto

Categorías: JQuery, Plugins jQuery, Tutoriales - Tags: , ,

[offtopic] Antes de empezar este artículo quiero dar mis condolencias a la Familia Jobs. Para mi Steve Jobs siempre fue un grande , incluso antes de enamorarme de sus productos y SO. Siempre recomiendo ver un discurso dado por el para los alumnos de Standford Bridge. Lo pueden encontrar en http://www.youtube.com/watch?feature=player_embedded&v=14v3kV47oZU [/offtopic]

Hoy les voy a enseñar 2 cosas. Como limitar los caracteres de un campo de texto ya sea un textarea o un input y como crear un plugin de Jquery.

Lo primero que necesitamos en un nuevo formulario dentro de una página HTML y le vamos a agregar un etiqueta span que será donde mostremos los caracteres que nos quedan con id=”counter”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script  type="text/javascript">
        $(document).ready(function() {
        //Nuestras funciones jQuery
        });
    </script>
</head>
<body>
    <form  id="formulario"  method="POST" action="?">
    <textarea  id="text"></textarea>
    <span  id="counter"></span>
    <input type="submit"  value="submit">
</form>
</body>
</html>

Ahora escribamos nuestra función para mostrar cuantos caracteres nos quedan.

1
2
var caracteres= 100;
$("#counter").html("Te quedan <strong>"+ caracteres+"</strong> caracteres");

Creamos una función que en el evento keyup que compruebe que la cantidad de caracteres escritos no es mayor que el limite que establecimos anteriormente. En caso contrario borra el valor de campo que excede dicho limite:

1
2
3
4
$("#text").keyup(function(){
    if($(this).val().length > caracteres){
        $(this).val($(this).val().substr(0, caracteres));
}

Explicando un poco esta función vemos que cada vez que se levanta el dedo de un tecla obtenemos el length(cantidad) de caracteres del valor(val) de nuestro campo de texto y lo comparamos con la cantidad estipulada anteriormente.
Si es mayor el valor del campo es sustituido por el valor actual menos el limite estipulado. Es decir, con la función substr recortamos la cadena de texto desde el caracter 0 hasta 100 y el resultado sustituye el valor del campo de texto.

Ahora cambiemos la frase de nuestro counter.

1
2
var  quedan = caracteres - $(this).val().length;
$("#counter").html("Te quedan <strong>"+ quedan+"</strong> caracteres.");

Aquí solamente restamos el limite establecido menos la cantidad de caracteres de nuestro campo.

Y si queremos agregarle un toque de color podemos hacer lo siguiente:

1
2
3
4
5
6
7
8
if(quedan <= 10)
{
    $("#counter").css("color","red");
}
else
{
    $("#counter").css("color","black");
}

Si nos quedan menos de diez caracteres , nuestro mensaje se volvera rojo!

El script entero entonces queda de la siguiente forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function()  {
    var caracteres = 220;
    $("#counter").html("Te quedan <strong>"+  caracteres+"</strong> caracteres.");
    $("#text").keyup(function(){
        if($(this).val().length > caracteres){
        $(this).val($(this).val().substr(0, caracteres));
        }
    var quedan = caracteres -  $(this).val().length;
    $("#counter").html("Te quedan <strong>"+  quedan+"</strong> caracteres.");
    if(quedan <= 10)
    {
        $("#counter").css("color","red");
    }
    else
    {
        $("#counter").css("color","black");
    }
    });
});

Pueden ver el ejemplo funcionando en http://jsfiddle.net/sa4HH/

Crear un Plugin jQuery para delimitar los campos de texto

Por lo general vamos a necesitar este código en más de una ocasión y para varios campos de texto, por lo que repetir todo una y otra vez no es aceptable. En este caso nos conviene crear un simple plugin de jQuery que será facil de aplicar.
Para ello siguiendo la lógica de jQuery vamos a crear la base de nuestro plugin que lo vamos a llamar “limitar”:
¡

1
2
3
4
5
6
7
8
(function($){
    $.fn.limitar = function(options) {
      defaults = {
        limite: 200,
        id_counter: false,
        clase_alert: false
     }
   var options = $.extend(defaults,  options);

Al declarar nuestro plugin limitar hemos creado unos valores por defecto que paso a explicar.

  • limite: Es el límite por defecto. En este caso 200 caracteres.
  • id_counter: Es el id del campo donde mostraremos el mensaje de caracteres faltantes. Por defecto es false, por lo que no mostraríamos ningún mensaje.
  • clase_alert: En lugar de cambiar el color si los caracteres son menos que diez vamos a asignarle un clase para así dar más libertad a la hora de aplicar estilo a este mensaje de alerta. Por defecto no se asigna ninguna clase ya que es false.

Ahora debemos terminar la función de nuestro plugin:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
return this.each(function() {
    var caracteres = options.limite;
    if(options.id_counter != false)
    {
        $("#"+options.id_counter).html("Te quedan <strong>"+ caracteres +"</strong> caracteres.");
    }
    $(this).keyup(function(){
        if($(this).val().length > caracteres){
        $(this).val($(this).val().substr(0, caracteres));
        }
        if(options.id_counter != false)
        {
            var quedan =  caracteres - $(this).val().length;
            $("#"+options.id_counter).html("Te quedan <strong>"+ quedan +"</strong> caracteres");
            if(quedan <= 10)
            {
                $("#"+options.id_counter).addClass(options.clase_alert);
            }
            else
            {
                $("#"+options.id_counter).removeClass(options.clase_alert);
            }
        }
    });
});

Estamos replicando nuestra función del principio con la única diferencia que usamos los valores dentro del array options para dar más flexibilidad al código y miren que sin por ejemplo options.id_counter es false nunca mostraremos el mensaje.

El plugin entero que debemos guardar como jquery.limitar.js quedaría de la siguiente forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
(function($){
    $.fn.limitar = function(options) {
      defaults = {
        limite: 200,
        id_counter: false,
        clase_alert: false
     }
   var options = $.extend(defaults,  options);
   return this.each(function() {
    var caracteres = options.limite;
    if(options.id_counter != false)
    {
        $("#"+options.id_counter).html("Te quedan <strong>"+ caracteres +"</strong> caracteres.");
    }
    $(this).keyup(function(){
        if($(this).val().length > caracteres){
        $(this).val($(this).val().substr(0, caracteres));
        }
        if(options.id_counter != false)
        {
            var quedan =  caracteres - $(this).val().length;
            $("#"+options.id_counter).html("Te quedan <strong>"+ quedan +"</strong> caracteres");
            if(quedan <= 10)
            {
                $("#"+options.id_counter).addClass(options.clase_alert);
            }
            else
            {
                $("#"+options.id_counter).removeClass(options.clase_alert);
            }
        }
    });
});
};
})(jQuery);

Para usarlo tan solo debemos llamarlo de la siguiente manera (no se olviden de crear la clase para dar estilo al mensaje de alerta):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script  type="text/javascript" src="jquery.limit.js"></script>
<style>
.alert{
    color: red;
    font-weight:bold;
}
</style>
<script  type="text/javascript">
    $(document).ready(function() {
        $("#testo").limitar({
            limite: 100,
            id_counter: "counter",
            clase_alert: "alert"
            });
         });
</script>

Pueden ver el ejemplo funcionando en http://jsfiddle.net/V7Gs6/1/

Saludos!!!!!

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • Pingback: Bitacoras.com()

  • Rikochett

    Me sumo a las condolencias a la familia de Steve Jobs. Soy un enamorado de los Macintosh y tengo uno un poco viejito en mi hogar, pero todavía funciona y de lo más bien. A ver si mi PC que uso en estos momentos va a durar la misma cantidad de años que tiene mi Mac.

    Pasando a lo de tu clase, mis felicitaciones, muy buena! Solo eché d emenos que publicaras tu propio ejemplo y una descarga de todos los archivos. Te lo menciono porque me señí a los pasos que indicas y no ha pasado nada. Me fijé en todos los detalles, hasta lo del id del textarea. Y ni así.

    Bueno, será, qué le voy a hacer. Se agradece igual!

    Saludos!

    • No Subi los archivos porque me parecio que con los links a jsfiddle iba a ser suficiente. Ya que ahi pueden ver el ejemplo funcionando y copiar el código.
      Lo único que se me ocurre puede ser la forma de cargar jQuery.
      Así que por las dudas voy a cambiar en el post a la forma tradicional que es :

      Prueba si así tienes más suerte!

      • Rikochett

        Gracias, amigo. ¿Puede que el fallo se deba a que el jquery entra en conflicto con otras librerías que estoy usando, como el Lightbox??

        Te lo pregunto porque ya me ha pasado antes con otras aplicaciones y la verdad que descubrir estos fallos es un poquitín agotador, de saca-pone y prueba …

        Saludos cordiales

  • Excelente articulo bro! me guardo en favoritos tu blog!!!, pero no entiendo que diferencia hay del uno al otro?

    • Uno actua en forma de plugin y el otro independiente. Es lo mismo en realidad

      • Gracias Damina! groso!, pero que diferencia hay en que sea independiente a hacerlo como plugin?, yo por ejemplo probe el primer resultado para una web y el otro que seria para wp? abrazo!

  • No, es un plugin de jQuery. Por lo que podes guardarlo en un archivo jquery.limitar.js por ejemplo y si luego lo queres usar en cualquier otra web tan solo añadis dicho archivo y lo ejecutas como explico en el post.

    Es cuestion de comodidad, aunque este plugin es chiquito en plugins más grandes y largos es conveniente.

    Saludos

  • Juan Carlos

    Estimado Damián, 
    Excelente tu artículo. Muy útil además de muy bien comentado.  Pero…

    Que pasó con (Click derecho) + copiar / pegar?Saludos