Limitar número de caracteres en un textarea con JQuery

¿Cuantas veces has necesitado o querido limitar el número de caracteres que un usuario puede introducir en un textarea? Pues bien, en el siguiente post vamos a ver cómo hacerlo muy fácilmente con JQuery.

Lo primero que debemos hacer es incluir la referencia a JQuery en el header de nuestra página web, si aún no lo hemos hecho:

1: <!-- Insertar JQuery desde su CDN -->
2: <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

A continuación modificamos nuestros textarea a limitar dentro de nuestro código HTML  añadiendo el atributo maxlength con un valor numérico, que será el límite de caracteres que contendrá ese textarea en concreto. Por ejemplo, vamos a crear un textarea con un límite de 100 caracteres:

1: <!-- Textarea con el atributo maxlength establecido -->
2: <textarea maxlength="100" cols="40" rows="10"></textarea>

Por último, copiamos el siguiente código Javascript en nuestro código HTML:

1: <script type="text/javascript">
2: $(document).ready(function(){
3:     // Función a lanzar cada vez que se presiona una tecla en un textarea
4:     // en el que se encuentra el atributo maxlength
5:     $("textarea[maxlength]").keyup(function() {
6:         var limit   = $(this).attr("maxlength"); // Límite del textarea
7:         var value   = $(this).val();             // Valor actual del textarea
8:         var current = value.length;              // Número de caracteres actual
9:         if (limit < current) {                   // Más del límite de caracteres?
10:             // Establece el valor del textarea al límite
11:             $(this).val(value.substring(0, limit));
12:         }
13:     });
14: });
15: </script>

Analizando un poco el código:

• Línea 5: Selecciona todos los textarea con el atributo maxlength, y asocia la función siguiente al evento keyup del teclado.
• Línea 6: Recoge el límite de caracteres a mostrar en el textarea.
• Líneas 7 y 8: Obtiene el texto contenido en el textarea y la longitud de dicho texto.
• Líneas 9 y 11: Comprueba si el número de caracteres actual del contenido es superior al del límite indicado. En caso afirmativo, modifica el contenido del textarea estableciendo los primeros “maxlength” caracteres del contenido.

¿Conocéis otra forma de limitar los caracteres de entrada en un textarea?