Contacaratteri textarea base

In puro javascript

by Salvatore Rotondo

HTML

<textarea id="text-input"></textarea>
<span id="counter">0</span>

JavaScript

/**
 * Funzione autoinvocante
 *
 * La sintassi (function() { ... })(); genera una funzione che viene eseguita
 * sul momento quando la pagina viene caricata.
 * Il vantaggio nel suo utilizzo sta nel fatto che tutte le variabili al suo 
 * interno sono isolate dall'ambiente esterno.
 * La variabile textInput dichiarata all'esterno della funzione autoinvocante
 * infatti mantiene il suo valore nonostante all'interno della funzione 
 * utilizziamo lo stesso nome per raccogliere il riferimento della textarea.
 */
var textInput = 'Questo valore non cambia';

(function() {
		
    // Raccogliamo i riferimenti per la textarea e lo span
    var textInput = document.getElementById('text-input'),
        counter = document.getElementById('counter');

		// Scriviamo la funzione che aggiorna il valore dello span
    function showCounter() {
        counter.innerHTML = this.value.length + ' caratteri';
    }

		/*
     * Registriamo l'evento keypress e keyup della textarea
     * per ottenere un conteggio che varia in tempo reale
     * anche se tenessimo premuto un tasto a caso per inserire
     * qualcosa nella textarea
     */
     
    // Keypress ci da il conteggio sulla pressione di un tasto
    // ma da solo non è accurato e non rileva la pressione sul backspace
    textInput.addEventListener('keypress', showCounter)
    
    // Keyup invece ci da il conteggio al rilascio di un qualsiasi tasto
    // facendo si che il conteggio risulti sempre corretto
    textInput.addEventListener('keyup', showCounter);
    
})();

/**
 * Usando la console integrata nel browser (tasto F12), possiamo vedere che
 * giunti a questo punto textInput mantiene il valore dichiarato inizialmente.
 */
console.info(textInput);