Spesso capita che vogliamo inserire nelle nostre textarea un sistema per contare quanti caratteri mancano ad un determinato limite.
Questa situazione, ad esempio, può capitare quando vogliamo fare inserire un commento e non vogliamo che sia troppo lungo.
Altro caso classico è quello dei sistemi di microblogging in cui il singolo post non può superare una data lunghezza (Es. Twitter).
In questa pagina vedremo come si può costruire usando jQuery.
Supponiamo che il numero di caratteri massimo che vogliamo consentire di inserire in una textarea sia 160, prima di procedere con il codice però una piccola precisazione, noi useremo in tutti gli esempi una textarea, perchè ci sembre la più indicata, ma il codice che proponiamo funziona anche con i textfield.
La prima cosa che facciamo è inserire una textarea con un dato id nella nostra pagina, sotto aggiungiamo uno spazietto dove scrivere il numero di caratteri mancanti, io userò un paragrafo, ma si potrebbe usare anche un altro tag, e questa scelta non infuenzerà in nessun modo il codice jQuery.
Ecco il codice jQuery:
$(document).ready(function(){
$max=160
$('#txtCount').keyup(function() {
$len=$('#txtCount').val().length;
$('#countBox').text($max-$len)
});
});
In questa versione il contatore fa il suo dovere, ma se superiamo il limite non fa altro che dirci che siamo andati oltre mostrando dei numeri negativi.
Se invece volessimo che oltre il limite jQuery ci impedisca di scrivere dobbiamo utilizzare questo codice.
Prima l’HTML (è uguale tranne che per gli id).
E il codice jQuery (ora è molto più cicciotto)
$(document).ready(function(){
$max=160
$('#txtCount2').keyup(function() {
$len2=$('#txtCount2').val().length;
$('#countBox2').text($max-$len2)
if ($max-$len2<0){
$str = $('#txtCount2').val();
$str = $str.substring(0,$max)
$('#txtCount2').val($str)
$('#countBox2').text(0)
}
});
});
Una demo di questo codice è reperibile al seguente indirizzo:
http://demo.studio-88.it/formDemo/jQCaratteri-Mancanti.php