Realizzare un contatore di battute con Jquery

Molto tempo fa realizzai un contatore di battute per un cms che limitava il testo inseribile dall’utente. Oggi questa soluzione è diventata obsoleta e anche poco accessibile, ma visto il successo di twitter che limita i caratteri inseribili a 140 e l’integrazione possibile sulle pagine html potrebbe tornare utile un esempio basato su Jquery.

VEDI ESEMPIO

Lo scopo dello script è quello di verificare la lunghezza del testo inserito dall’utente e mostrare quanti caratteri abbia ancora a disposizione.

Per realizzare questo utilizzeremo un textarea che ci mette a disposizione più spazio per testi lunghi ma la soluzione è ugualmente applicabili ad un campo <input>.

Iniziamo con Jquery e definiamo document ready affinchè lo script inizi al caricamento completo della pagina.

(document).ready(function(){});

Definiamo una variabile battute che definirà la lunghezza massima del testo

var battute = 140;

In origine l’intezione era quella di definire l’attributo maxlenght su <textarea> ma nelle specifiche W3C questo elemento non supporta tale attributo. Nel caso si definisse potremmo prelevare il valore con Jquery ed inserirlo nella variabile battute.

In seguito definiamo il testo che comunicherà all’utente quante battute a disposizione gli restano.

$('textarea').after("
<p class='avviso'>Hai ancora <strong>"+ (battute - $('textarea').val().length)+"</strong> caratteri disponibili</p>
");

La funzione after inserisce un contenuto dopo l’elemento specificato. Nel nostro caso inseriamo un paragrafo che riporta all’utente quante battute restano. In questo modo nel caso l’utente aggiorni la pagina e rimanga del testo nel textarea, il valore sarà aggiornato al numero di caratteri corrente.

Ora possiamo definire un evento sul keyup che servirà per aggiornare il valore.

$('textarea').keyup(function(){})

Al rilascio del mouse sul textarea avverranno le azioni successivamente dichiarate.

if($(this).val().length > battute){
$(this).val($(this).val().substr(0, battute));
}

Con questo controllo verifichiamo se il numero di battute è superiore a quello specificato, nel caso Jquery accorcia il testo inserito al numero di battute dichiarato al rilascio del pulsante.

Nell’ultima parte definiamo il messaggio all’utente con le battute rimanenti.

$(this).parent().find('p.avviso').html(
"Hai ancora <strong>"+ (battute - $(this).val().length)+"</strong> caratteri disponibili
");

L’inserimento dell’ultimo paragrafo avviene totalmente da jquery nel caso in cui javascript fosse disattivato non ci sarebbe alcun controllo sul numero di caratteri inserito.

Come tutti i controlli sui form javascript ha il solo scopo di facilitare l’inserimento e di comunicare in maniera amichevole con l’utente le specifiche d’inserimento, un controllo sui dati inseriti deve avvenire sempre lato server per ragioni di sicurezza.

VEDI ESEMPIO

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Tutorial e contrassegnata con , . Contrassegna il permalink.

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>