Fokus på tekstfelt i JavaScript

La oss si at vi har et input-felt. Du kan klikke på dette input-feltet, og etter det vil en blinkende strekmarkør dukke opp, og du vil kunne skrive tekst inn i det.

Om en slik tilstand sier man at input-feltet for øyeblikket har inndatafokus. I praksis betyr dette at hvis du begynner å skrive tekst fra tastaturet, vil denne teksten havne i det input-feltet som for øyeblikket har inndatafokus. Hvis du deretter klikker et sted utenfor input-feltet, vil dette input-feltet miste inndatafokus og det vil ikke være mulig å skrive tekst inn i det.

For å fange øyeblikket når et input-felt får eller mister fokus, er det i JavaScript laget spesielle hendelser: Hendelsen focus later deg fange når et input-felt får fokus, og hendelsen blur - når det mister det. La oss prøve i praksis. La oss si at vi har et input-felt:

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

La oss henvisning til det i en variabel:

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

Og nå la oss gjøre slik at når det får fokus, skrives den nåværende teksten i input-feltet ut til konsollen:

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

Det er gitt et input-felt. Når det får fokus, skriv inn i det tallet 1, og når det mister fokus - tallet 2.

Det er gitt et input-felt. La det skrives inn et tall i det. Når det mister fokus, skriv ut kvadratet av dette tallet på skjermen.

Det er gitt et input-felt, hvor det opprinnelig er en viss tekst. Når input-feltet får fokus, tøm innholdet i dette input-feltet.