Back to home page
Il Jester
My little dream is in developing

Un counter in jQuery per le nostre aree di testo

Utilissimo, soprattutto nelle aree commento, onde evitare che gli utenti scrivano commenti addirittura più lunghi dei nostri articoli. Lo script è in jQuery.

Prima di tutto però l’html. Abbiamo dunque un’area di testo a cui assegniamo un id chiamato “field”. Poi un div al quale assegniamo l’id “charNum”. Naturalmente se dovete utilizzare più aree di testo nella medesima pagina, è opportuno che al posto degli id utilizziate le classi.

<textarea id="field" rows="5" cols="40"></textarea>
<div id="charNum">50</div>

Quanto al lato jquery, l’implementazione del codice è abbastanza semplice e intuitiva: dobbiamo incollare lo script sottostante tra i tag <head> o nel footer prima della chiusura del tag </body>.

$(function() {
   $("#field").keyup(function(){
       el = $(this);
       if(el.val().length >= 50){
           el.val( el.val().substr(0, 50) );
       } else {
           $("#charNum").text(50-el.val().length);
       }
   });
});

Una volta installato, il risultato è quello che potete vedere su jsfiddle.

Tenete presente che questo script funziona fintanto che l’utente permette nel proprio browser il codice javascript. Se mai dovesse disabilitarlo, lo script anzidetto non avrà alcuna utilità.

E' un post utile?00