Um guia abrangente para impor um comprimento máximo em áreas de texto em HTML usando JavaScript

No desenvolvimento web, muitas vezes é necessário controlar o comprimento máximo do texto inserido no texto áreas. Este cenário exige que você aplique automaticamente o atributo maxlength em diversas áreas de texto. Embora as soluções anteriores envolvessem manipulação manual de eventos para cada área de texto, exploraremos uma abordagem alternativa que elimina a necessidade de código repetitivo.

Solução:

A chave para esta solução está na capacidade do JavaScript para verificar a página em busca de todas as áreas de texto e adicionar dinamicamente ouvintes de eventos às áreas apropriadas. Aproveitando o evento onload, obtemos acesso a todo o conteúdo da página durante o carregamento, incluindo quaisquer áreas de texto.

window.onload = function() {

Agora, podemos percorrer o documento, procurando por todos os elementos com a tag TEXTAREA:

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

Em seguida, iteramos em cada área de texto para verificar se ela possui um atributo maxlength válido. Observe que usamos uma expressão regular para garantir que o valor maxlength seja um número.

for(var i = 0, l = txts.length; i 
Para cada área de texto qualificada, definimos uma função de retorno de chamada para validar o comprimento máximo . Esta função irá:
Recuperar o valor do atributo maxlength como um número inteiro
Verificar se o comprimento atual do valor da área de texto excede o maxlength
Se excedido , exiba uma mensagem de alerta e trunque o valor para o comprimento máximo permitido
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, anexamos esta função de retorno de chamada aos eventos keyup e blur da área de texto.
txts[i].onkeyup = func;
txts[i].onblur = func;
Essa abordagem abrangente fornece uma solução perfeita para impor automaticamente um maxlength em todas as áreas de texto qualificadas em uma página da web sem a necessidade de manipulação repetitiva de eventos.