JAVASCRIPT – Contatore di caratteri per textarea

Nell’utilizzare sistemi di commenti o post, a volte diventa necessario mettere un limite al numero di caratteri che è possibile inserire nella textarea dedicata, per evitare la copiatura di articoli o l’inserimento di commenti che diventano più lunghi dell’articolo stesso.

Questo esempio è utilie a tale scopo: in pochi passi si configura un contatore javascript che blocca l’inserimento dei caratteri all’interno della textarea controllata una volta che viene superato il limite imposto. L’esempio è scaricabile qui.

In un file javascript .js salviamo il seguente codice:

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(entrada,salida,texto,caracteres) {
  var entradaObj=getObject(entrada);
  var salidaObj=getObject(salida);
  var longitud=caracteres - entradaObj.value.length;
  if(longitud <= 0) {
    longitud=0;
    texto='<span class="disable"> '+texto+' </span>';
    entradaObj.value=entradaObj.value.substr(0,caracteres);
  }
  salidaObj.innerHTML = texto.replace("{CHAR}",longitud);
}

A questo punto non ci resta che richiamare con il solito tag ‘<script src”..”></string>’ il file javacript appena creata, ed infine configurare la texarea che vogliamo controllare:

<textarea id="text" name="text" 
onkeyup="Count('text','counter','{CHAR} caratteri rimanenti',2000);"
maxlength="2000">
</textarea><br />
<span id="counter" class="minitext"><i>2000 caratteri rimanenti</i></span>

Il valore “2000″ è configurabile, e rappresenta il massimo numero di caratteri che è possibile inserire: lo “span” invece è dove verrà visualizzato il numero di caratteri rimanenti, calcolati a mano a mano che vengno inseriti.