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:
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: <!-- Insertar JQuery desde su CDN -->
2: <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
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 textarea7: var value = $(this).val(); // Valor actual del textarea8: var current = value.length; // Número de caracteres actual9: 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.