Una guía completa para imponer una longitud máxima en áreas de texto en HTML usando JavaScript

En el desarrollo web, a menudo es necesario controlar la longitud máxima del texto ingresado en el texto áreas. Este escenario requiere que aplique automáticamente el atributo maxlength en múltiples áreas de texto. Si bien las soluciones anteriores implicaban el manejo manual de eventos para cada área de texto, exploraremos un enfoque alternativo que elimina la necesidad de código repetitivo.

Solución:

La clave de esta solución radica en la capacidad de JavaScript para escanear la página en busca de todas las áreas de texto y agregar dinámicamente detectores de eventos a los apropiados. Al aprovechar el evento onload, obtenemos acceso a todo el contenido de la página al cargarla, incluidas las áreas de texto.

window.onload = function() {

Ahora podemos recorrer el documento, buscando todos los elementos con la etiqueta TEXTAREA:

var txts = document.getElementsByTagName('TEXTAREA');

A continuación, iteramos a través de cada área de texto para verificar si tiene un atributo de longitud máxima válido. Tenga en cuenta que utilizamos una expresión regular para garantizar que el valor de longitud máxima sea un número.

for(var i = 0, l = txts.length; i 
Para cada área de texto calificada, definimos una función de devolución de llamada para validar la longitud máxima . Esta función:
Recuperará el valor del atributo maxlength como un número entero
Verificará si la longitud actual del valor del área de texto excede la longitud máxima
Si se excede , muestra un mensaje de alerta y trunca el valor a la longitud máxima permitida
var func = function() {
    var len = parseInt(this.getAttribute("maxlength"), 10);

    if(this.value.length > len) {
        alert('Maximum length exceeded: '   len);
        this.value = this.value.substr(0, len);
        return false;
    }
}
Finalmente, adjuntamos esta función de devolución de llamada a los eventos keyup y desenfoque del área de texto.
txts[i].onkeyup = func;
txts[i].onblur = func;
Este enfoque integral proporciona una solución perfecta para imponer automáticamente una longitud máxima en todas las áreas de texto calificadas en una página web sin la necesidad de manejo de eventos repetitivos.