Creare Textarea Counter jQuery e CSS3

Oggi vogliamo mostrarvi come costruire un contatore di caratteri dinamici solo con l’uso di jQuery e CSS3. Ho deciso di scrivere questo breve tutorial, visto che mi sono trovato alle prese di con un portale web che aveva la necessita’ di inserire una area di testo editabile da parte dell’utente ma con una limitazione data dal numero di caratteri che quest’ultimo puo’ inserire. Insomma una sorta di textarea modello Twitter, ma con la limitazione a 120 caratteri. Adesso vediamo come inserire un contatore con limitazione di caratteri con l’uso di jQuery.

Partenza!

Creare Textarea Counter jQuery

In questa textarea l’utente riuscira’ sempre ad avere sotto controllo il numero di caratteri che ha ancora a disposizione.

DEMO

DOWNLOAD

Iniziamo a scrivere la nostra pagina Html:

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Textarea Counter with jQuery</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=ABeeZee">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script type="text/javascript" src="txtlimit.js"></script>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

Qui praticamente richiamo un foglio di stile e una libreria jQuery che puo’ essere completamente personalizzata. Inoltre per rendere l’aspetto del tutto un po’ piu’ accattivante e professionale, ho inserito un font family caricato da Google, senza doverlo caricare sul mio server. Anche questa scelta potrebbe essere completamente stravolta a seconda delle vostre esigenze. Adesso continuiamo con il resto del codice Html per la nostra pagina:

<body>
  <div id="w">
    <h1>Live Textarea Count Limit</h1>
    <h3>Il testo e' limitato a 120 caratteri</h3>

    <p id="counter"><span>0</span> caratteri</p>

    <textarea name="text" id="text" tabindex="1"></textarea>
  </div>
</body>
</html>

Anche questa parte di codice e’ molto semplice, la cosa piu’ importante e’ l’ID counter, che si aggiorna ogni qual volta l’utente inserisce un carattere in piu’.

Adesso passiamo alla libreria JavaScript txtlimit.js che contiene tutto il nostro codice jQuery.

$(document).ready(function(){
  var limitnum = 120; // questo e' il limite dei caratteri impostato

Naturalmente per ogni esigenza il limite dei caratteri impostato, lo potete personalizzare a piacimento.

Per rendere il codice piu’ pulito e professionale, andiamo a creare una funzione per il calcolo dei caratteri che ci avvisi quando ne mancano almeno 20:

function limits(obj, limit) {
  var cnt = $("#counter > span");
  var txt = $(obj).val();
  var len = txt.length;

  // controlla se i caratteri sono fuori limite
  if(len > limit){
    $(obj).val(txt.substr(0,limit));
    $(cnt).html(len-1);
  }
  else {
    $(cnt).html(len);
  }

  // controlla se i caratteri rimanenti sono meno di 20
  if(limit-len <= 20) {
    $(cnt).addClass("warning");
  }
}

una volta definita la nostra funzione personalizzata, possiamo richiamare la funzione utilizzando il gestore di eventi Keyup, in modo da richiamarla ogni qual volta l’utente inserisce una lettera. Ecco il codice del nostro script:

$('textarea').keyup(function(){
  limits($(this), limitnum);
});

Adesso possiamo chiudere il nostro file js e tutto dovrebbe funzionare a bomba…. Consiglio spassionato, utilizzate il codice non in tutte le pagine del vostro sito web e se dovete aggiungere piu’ textarea chiamatele tutte in modo diverso, con relativi file js diversi.

Adesso andiamo a imbellettare il tutto con un tocco di classe del nostro foglio di stile:

#counter { font-size: 1.3em; color: #7e7e7e; margin-bottom: 9px; }
#counter span { font-style: italic; font-size: 2.1em; line-height: 1.55em; color: #a99bb1; }

#counter span.warning { color: #b66875; }

.txt {
outline: none;
width: 65%;
height: 130px;
padding: 9px 16px;
font-size: 1.5em;
line-height: 1.35em;
color: #454545;
border-top: 1px solid #c1c1c1;
border-left: 1px solid #b7b7b7;
border-bottom: 1px solid #818181;
border-right: 1px solid #818181;
box-shadow: 0px 1px 1px rgba(0,0,0,0.35);
}

Ho definito uno stile per il contatore che si distingua dal resto della pagina. Per i testi un po’ di CSS3 che non guasta mai alla vista e per dare un tocco di eleganza alla pagina.

DEMO

DOWNLOAD

Questo e’ tutto, abbiamo realizzato un’area di testo con un contatore che limita i caratteri inseriti dall’utente, abbiamo giocato con il foglio di stile e il codice jQuery, ma questa deve essere solo la base per mille altri utilizzi di questo codice. Quindi adattatelo pure alle vostre esigenze e se avete dubbi o incertezze, avanti con i commenti.

Alla prossima!