Creare un Conta Caratteri in JavaScript

Indice dei contenuti

In questo articolo imparerai a realizzare e programmare un “conta caratteri” di un’area di testo in JavaScript all’interno di una pagina web HTML. L’applicazione consentirà di contare i caratteri (con spazi o senza spazi vuoti) di un testo scritto in una textarea, senza limite dei caratteri massimi.

Come creare un conta caratteri on JavaScript

La creazione di un elemento in JavaScript per tenere il conto del numero di caratteri contenuto in un elemento HTML di una pagina web si effettua in pochi step di programmazione.

La prima parte riguarda la scrittura dello script JS, che fa funzionare il conteggio dei caratteri, la seconda parte invece, la più facile, riguarda la creazione dell’elemento visivo HTML, con cui si andrà ad interagire.

A questo elemento è possibile applicare regole di stile CSS per rendere il tutto più gradevole alla vista. In questo articolo però non abbiamo interesse per questo aspetto e lasceremo agli utenti la possibilità di gestirlo in piena libertà sulle loro pagine web o con un editor di codice.

Se sei un principiante e non comprendi pienamente il codice, puoi approfondire le tue conoscenze con il corso JavaScript gratuito di BytePost.

Per seguire il post, consiglio di possedere delle conoscenze di base di JavaScript e HTML, anche se tutti i codici e script descritti qui di seguito sono di facile comprensione anche ai meno esperti.

Codice JavaScript

Tutto il funzionamento del conta caratteri si basa sul codice JavaScript, in cui sono dettate le istruzioni che verranno interpretate dal browser durante la digitazione dei caratteri nell’area di testo (o textarea).

Se non sai cos’è JavaScript ti consiglio di leggere qui.

Spiegato in maniera dettagliata: Ogni qual volta verrà digitato un carattere nell’elemento <textarea> presente nella pagina HTML, il browser convertirà la lunghezza dei valori in numeri, che verranno poi visualizzati nell’apposito campo predisposto.

Agli elementi HTML verranno assegnati degli ID (selettori): uno all’area di testo e un’altra all’area di output (numerazione), con cui verranno gestite le istruzioni dello script. Lo script dovrà precedere l’elemento HTML, quindi consiglio di scriverlo in <head> della pagina web.

Vediamo il codice per capire meglio di cosa si tratta.

<script>
  function conto(){
      var c = document.getElementById('testo').value;
      document.getElementById('output').innerHTML = c.length;
  }
</script>

Esaminiamo il codice:

La funzione JS per il conteggio, chiamata “conto()“, verrà eseguita ogni volta in cui verrà digitato un carattere nella textarea.
La variabile “c” preleva il valore contenuto nell’elemento HTML con ID “testo“.
Viene eseguito il calcolo del numero dei caratteri così da essere visualizzato nell’elemento “output“.

Puoi rimuovere i tag <script> se preferisci scrivere il codice in un documento .js esterno.

Elementi HTML

Ora non resta altro che creare gli elementi HTML con cui si andrà ad interagire. Questa parte è quella più semplice da scrivere, perché si tratta semplicemente di definire due oggetti base in HTML.

Il primo è l’area di testo, indicato con il tag <textarea>.
Il secondo è la linea di output, una semplice riga di testo creata tramite il tag <p> o <span>.

Ad entrambi assegneremo i rispettivi selettori (ID) precedentemente indicati.

<textarea id="testo" onkeyup="conto();"></textarea>
<p>Numero caratteri: <span id="output">0</span></p>

L’evento “onkeyup” serve a far eseguire la funzione JavaScript “conto();” ogni volta che verrà digitato carattere e rilasciato il tasto dalla tastiera.

Inseriscili nella posizione che preferisci all’interno della tua pagina web, salva ed esegui il test per controllare che tutto funzioni.

Aggiunte

Nella forma descritta, il conta caratteri è privo di altre funzionalità. Possiamo aggiungere altre righe di codice per rimuovere gli spazi bianchi dal conteggio ad esempio, e per farlo basterà aggiungere una riga di codice aggiuntiva:


<script>
  function conto(){
      var c = document.getElementById('testo').value;
      c=c.replace(/\s/g, '');
      document.getElementById('output').innerHTML = c.length;
  }
</script>

L’istruzione aggiunta nel mezzo dello script farà sì che ogni singolo spazio bianco/vuoto (digitato con la barra spaziatrice) non verrà conteggiato nel numero di output.

Il conta caratteri

Qui puoi testare il codice in tutta libertà e verificare il suo funzionamento. Lo script è identico a quello descritto nel capitolo “Codice JavaScript“.

Numero caratteri: 0

Se vuoi testare in maniera più approfondita lo strumento “conta caratteri”, ti consiglio di provare il nostro a questa pagina.

Come già spiegato, il codice è privo di regole CSS. Divertiti a modificare lo stile a tuo piacere.

Codice completo

Qui il codice completo del conta caratteri. Copialo ed incollalo nella pagina del tuo sito per integrarlo.

<script>
  function conto(){
      var c = document.getElementById('testo').value;
      c=c.replace(/\s/g, '');
      document.getElementById('output').innerHTML = c.length;
  }
</script>
<textarea id="testo" onkeyup="conto();"></textarea>
<p>Numero caratteri: <span id="output">0</span></p>

Hai domande o dubbi? Scrivi un commento e ti risponderemo.

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!

Articoli recenti: