Contatore di caratteri per textarea

Come contare i caratteri di una textarea?

Vediamo come creare un contatore di caratteri per textarea in JavaScript. Può capitare ad esempio di dover limitare il numero di caratteri scritti in un campo textarea, per fare questo possiamo utilizzare il JavaScript e sfruttando una delle sue caratteristiche principali ossia il fatto di essere client-side, aggiornerà il dato in tempo reale senza bisogno di ricaricare la pagina.

Il codice JavaScript è il seguente:

<script type="text/javascript">
function getObject(obj) {
  var theObj;
  if(document.all) {
    if(typeof obj=="string") {
      return document.all(obj);
    } else {
      return obj.style;
    }
  }
  if(document.getElementById) {
    if(typeof obj=="string") {
      return document.getElementById(obj);
    } else {
      return obj.style;
    }
  }
  return null;
}
 
function Count(idTextArea,idContatore,texto,maxCaratteriAmmessi) {
  var idTextAreaObj=getObject(idTextArea);
  var idContatoreObj=getObject(idContatore);
  var delta=maxCaratteriAmmessi - idTextAreaObj.value.length;
  if(delta <= 0) {
    delta=0;
    texto='<span class="contatore_stop"> '+texto+' </span>';
    idTextAreaObj.value=idTextAreaObj.value.substr(0,maxCaratteriAmmessi);
  }
  idContatoreObj.innerHTML = texto.replace("{CHAR}",delta);
}
</script>

Per contare i caratteri della textarea, usiamo la funzione appena descritta come segue:

<form>
  <textarea id="text" maxlength="160" name="text" rows="5" onkeyup="javascript:Count('text','contatore','{CHAR} caratteri rimanenti',160);"></textarea>
  <span id="contatore" class="contatore"><i>160 caratteri rimanenti</i></span>
</form>

Il valore “160″ rappresenta il massimo numero di caratteri ammessi all’interno della textarea ed è stato impostato per comodità ma può essere configurato a piacimento.

All’interno del tag span, invece, è mostrato il numero di caratteri rimanenti, calcolati a mano a mano che vengono inseriti.

Vediamo un esempio

Nota

È importante sottolineare il fatto che, essendo il JavaScript un linguaggio client-side, è possibile manipolarlo per inviare più dati di quelli ammessi. È quindi indispensabile effettuare i dovuti controlli anche server-side all’invio del modulo per verificare la correttezza dei dati ricevuti. In questo caso del numero dei caratteri, ma in generale questo consiglio è sempre valido.