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:

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

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

javascriptlet 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:

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