Focus dei campi di testo in JavaScript

Supponiamo di avere un input. Puoi cliccare su questo input e dopo di che inizierà a lampeggiare il cursore a barra e potrai inserire del testo al suo interno.

Di questo stato si dice che l'input ha attualmente il focus di inserimento. In pratica questo significa che se si inizia a digitare del testo dalla tastiera, quel testo andrà nell'input che ha attualmente il focus. Se successivamente si clicca da qualche parte fuori dall'input, quest'ultimo perderà il focus di inserimento e non sarà più possibile digitare testo al suo interno.

Per catturare il momento in cui un input ottiene o perde il focus, in JavaScript sono previsti degli eventi speciali: l'evento focus consente di rilevare quando un input ottiene il focus, mentre l'evento blur - quando lo perde. Proviamo praticamente. Supponiamo di avere un input:

<input id="elem" value="text">

Otteniamo un riferimento ad esso in una variabile:

let elem = document.querySelector('#elem');

E ora facciamo in modo che quando ottiene il focus venga stampato in console il testo corrente dell'input:

elem.addEventListener('focus', function() {
	console.log(elem.value);
});

Dato un input. Quando ottiene il focus, scrivi al suo interno il numero 1, e quando perde il focus - il numero 2.

Dato un input. In esso viene inserito un numero. Quando perde il focus, stampa a schermo il quadrato di questo numero.

Dato un input, in cui inizialmente è presente del testo. Quando l'input ottiene il focus, pulisci il contenuto di questo input.