In questo articolo risolveremo la problematica del maxlength di una textarea html utilizzando poche semplici righe di codice Javascript.
Come tutti sapranno, l’attributo maxlength è accettato esclusivamente dai campi di tipo testo e non dalle aree di testo.
Realizzeremo una funzione che chiameremo appunto maxlength che accetta in input 2 parametri obbligatori ed un terzo opzionale:

• riferimento alla textarea
• numero massimo di caratteri
• id campo contatore caratteri mancanti (opzionale)

Prima di vedere il codice chiariamo il concetto del terzo campo opzionale. Vorremmo ad esempio poter predisporre un contatore affiancato alla textarea che visualizzi il numero di caratteri cancora disponibili.
In fondo all’articolo è possibile scaricare il codice completo e testare una demo.

Ecco il codice della funzione maxlength:

function maxlength(area,max,id_campo){
    var conta = max - area.value.length;
    if(id_campo!=null){
        document.getElementById(id_campo).innerHTML=conta;
    }
    if(conta < 0){
        area.value = area.value.substring(0,max);
        if(id_campo!=null){
            document.getElementById(id_campo).innerHTML = '0';
        }
    }
}

Il codice della funzione è molto semplice:

• calcoliamo quanti caratteri sono ancora disponibili (var conta)
• se tale valore è minore di 0 allora cancelliamo i caratteri in più (substring)

Una volta definita la funzione, questa va così richiamata all’evento onKeyUp:

<!-- Soluzione base -->
<textarea rows="7" cols="40" onkeyup="maxlength(this,160)">
</textarea>

Qualora volessimo presentare all’utente anche il contatore dei caratteri ancora disponibili:

<!-- Soluzione con contatore caratteri disponibili -->
Hai a disposizione ancora <span id='conta'>160</span> caratteri:<br/>
<textarea rows="7" cols="40" onkeyup="maxlength(this,160,'conta')">
</textarea>

Da notare che nella seconda soluzione abbiamo aggiunto l’ID di un elemento di tipo span adibito a contatore.
In conclusione la sintassi della funzione maxlength è la seguente:

maxlength(this,max_caratteri,[id_contatore])

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.