Fokus på tekstfelter i JavaScript

Lad os sige, at vi har et inputfelt. Du kan klikke på dette inputfelt, og efter det vil en cursor-stav begynde at blinke, og det vil være muligt at indtaste tekst i det.

Om denne tilstand siges det, at inputfeltet i øjeblikket har inputfokus. I praksis betyder det, at hvis du begynder at indtaste tekst med tastaturet, vil denne tekst blive placeret i det inputfelt, der i øjeblikket har inputfokus. Hvis du derefter klikker et sted uden for inputfeltet, vil dette inputfelt mist inputfokus, og det vil ikke være muligt at indtaste tekst i det.

For at fange øjeblikket, hvor et inputfelt får eller mister fokus, findes der i JavaScript speciale events: eventet focus lader dig fange, hvornår et inputfelt får fokus, og eventet blur - tab af fokus. Lad os prøve det i praksis. Lad os sige, at vi har et inputfelt:

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

Lad os få en reference til det i en variabel:

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

Og lad os nu gøre sådan, at når det får fokus, udskrives inputfeltets nuværende tekst til konsollen:

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

Givet et inputfelt. Når det får fokus, skriv i det tallet 1, og når det mister fokus - tallet 2.

Givet et inputfelt. Lad et tal indtastes i det. Når det mister fokus, udskriv kvadratet af dette tal på skærmen.

Givet et inputfelt, som oprindeligt indeholder en eller anden tekst. Når inputfeltet får fokus, skal du rydde indholdet af dette inputfelt.