Contatore caratteri per textarea
Mostra quanti caratteri sono stati utilizzati.
Quando si usa
Nei moduli con limiti di lunghezza, come recensioni, messaggi brevi, abstract e descrizioni.
Perché si usa
L'utente conosce in anticipo lo spazio disponibile e può adattare il testo prima dell'invio.
Vantaggi principali
- Aggiornamento in tempo reale
- Limite nativo maxlength
- Messaggio accessibile con aria-live
Anteprima del risultato
Il contatore mostra in tempo reale quanti caratteri sono stati digitati in una casella di testo.
Caratteri: 28
Codice completo
Puoi copiare il frammento e inserirlo in una pagina di prova. Prima della pubblicazione sostituisci i dati dimostrativi con quelli reali.
<label for="messaggio">Messaggio</label>
<textarea id="messaggio" maxlength="300"></textarea>
<p id="conteggio" aria-live="polite">0 di 300 caratteri</p>
<script>
const campo = document.getElementById('messaggio');
const conteggio = document.getElementById('conteggio');
campo.addEventListener('input', function(){
conteggio.innerText = campo.value.length + ' di ' + campo.maxLength + ' caratteri';
});
</script>Da personalizzare: Modifica maxlength, testo del messaggio e ID del campo.
Errore da evitare: Il controllo nel browser non sostituisce la verifica della lunghezza sul server.