Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

Contare i caratteri mancanti in una textarea con jQuery

Scritto da Fare-internet il 26 novembre 2010 condividi condividi

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.

<form>
        <textarea id="txtCount" class="MyTxt"></textarea>
        <p id="countBox" style="text-align:right;color:#C30">160</p>
</form>

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).

<form>
        <textarea id="txtCount2" class="MyTxt"></textarea>
        <p id="countBox2" style="text-align:right;color:#C30">160</p>
</form>

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

Twitter