disign.it | Jquery: contatore caratteri immessi | a digital sign for a best design!
A digital sign for a best design
Javascript 3.826 visualizzazioni

Jquery: contatore caratteri immessi

25/05/2012

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!

← Jquery noconflict CSS: link a pdf o altri tipi di documenti →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.