Corsi on-line

Contare i caratteri all’interno di una textarea usando jQuery

Il conteggio dei caratteri all’interno di una textarea è uno grande classico di javascript. In questo post vedremo come implementare questa funzione ever-green utilizzando il framework jQuery che, come al solito, ci rende la vita molto più facile.
Per prima cosa vediamo il codice HTML della nostra textarea:

Digita il tuo messaggio:<br/>
<textarea id="msg"></textarea><br/>
<span id="conteggio"></span>

La cosa importante da notare sono gli ID assegnati, rispettivamente, alla textarea ed allo span.
Vediamo ora il codice Javascript da inserire dopo il codice HTML appena visto:

<script type="text/javascript">
// avvio il controllo all'evento keyup
$('textarea#msg').keyup(function() {
  // definisco il limite massimo di caratteri
  var limite = 100;
  var quanti = $(this).val().length;
  // mostro il conteggio in real-time
  $('span#conteggio').html(quanti + ' di ' + limite + ' caratteri ammessi');
  // quando raggiungo il limite
  if(quanti >= limite) {
    // mostro un avviso
    $('span#conteggio').html('<strong>Non puoi inserire più di ' + limite + ' caratteri!</strong>');
    // taglio il contenuto per il numero massimo di caratteri ammessi
    var $contenuto = $(this).val().substr(0,limite);
    $('textarea#msg').val($contenuto);
  }
});
</script>

Ovviamente, perchè tutto funzioni, è necessario aver incluso la libreria jQuery all’interno dell’header della pagina.

Post correlati
I più letti del mese
Tematiche