Domanda: come si fa ad intercettare l'input dell'utente carattere per carattere in un qualunque campo del nostro form?

Risposta: usando l'evento onkeyup.

SBAGLIATO!

Beh, diciamo non del tutto corretto. Fino a poco tempo fa e per i browser più vecchi, infatti, usare l'evento onkeyup (cioè: "quando l'utente rilascia il tasto della tastiera") era l'unico modo per sapere quando il nostro utente aveva inserito un carattere nel campo che ci interessa. Questo metodo però non è efficiente e "giusto" per almeno due ragioni:

  1. c'è sempre un ritardo fra il rilascio del tasto e il lancio dell'evento – questa cosa può portare a problemi ad esempio quando si tiene il tasto premuto e si fa ripetere il carattere
  2. questo evento non intercetta il cambiamento che avviene quando non si preme un tasto (pensiamo ad una select o ai nuovi campi di input HTML5, tipo il campo "number")

E allora?

Come sempre, HTML5 ci ha abituati al fatto che la soluzione più semplice è sempre la migliore. E' stato creato un nuovo evento

input

che viene eseguito ogni volta l'utente cambia il valore di un qualsiasi campo: quando aggiunge un carattere ad un campo di testo ma anche quando cambia la selezione di una select o usa i tasti per cambiare il valore di un campo "number".

Vediamo un esempio – ipotiziamo di avere un campo "number" così:

Quandi anni hai? <input type="number" id="anni">

il che produce una cosa del genere:

Per intercettare un qualsiasi cambiamento nel campo – sia che l'utente scriva un numero a mano sia che usi le due freccette per andare "su" e "giù" – ci basterà un semplice

var inputField = document.getElementById("anni");<br />    <br />    inputField.addEventListener("input", function(e) {<br />      var anni = inputField.value;<br />      // ...<br />    }, false);

I vantaggi? Almeno un paio – che sono il "complemento a uno" dei problemi che abbiamo detto sopra:

  1. possiamo usare un solo event listener per tutti i campi visto che l'evento "input" viene lanciato a prescindere dal tipo di campo (testo, textarea, select, numero, …)
  2. riusciamo ad intercettare qualsiasi cambiamento avvenga, a prescindere dal modo (inserendo il valore a mano o usando le freccette per l'input "number", ad esempio)
  3. siamo dei fighi HTML5… 😉

La lista completa dei nuovi (e vecchi) eventi supportati da HTML5: http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#handler-oninput

A rileggerci!