Jquery: contatore caratteri immessi

Con Jquery possiamo realizzare un semplice contatore che verifica in tempo reale la lunghezza del testo immesso dall'utente in una textarea di un modulo.

Poiché per la textarea non è possibile applicare il maxlenght, lo script risulta molto utile per avvertire l'utente dell'eventuale sforamento e che quindi il suo testo sarà tagliato!

Come sempre occorre prima di tutto caricare l'ultima versione di Jquery, (qui l'articolo), e poi lo script Jquery da inserire sarà il seguente:

$(document).ready(function(){
    $('.box').each(function(){ // il contatore viene applicato all'oggetto con classe box
        $max = '300'; // definire il numero massimo di caratteri

    var length = $(this).val().length;
    $(this).parent().find('.contatore').html( $max - length + ' caratteri rimanenti');

    $(this).keyup(function(){ // intercetto il keyup per aggiornare
    var new_length = $(this).val().length;
    if (new_length <= $max) {
    $(this).parent().find('.contatore').html( $max - new_length + ' caratteri rimanenti'); }
    else {
    alert ('numero di caratteri massimo superati,  il suo testo verrà tagliato!'); }
    });
    });
    });

e ora basta costruire la textarea con classe box!