Textfältsfokus i JavaScript

Låt oss säga att vi har ett inputfält. Du kan klicka på detta inputfält och efter det kommer en blinkande pinne att synas och du kan börja skriva text i det.

Det sägs att inputfältet för tillfället har inmatningsfokus. I praktiken betyder det att om du börjar skriva text med tangentbordet kommer den texten att hamna i det inputfält som för tillfället har inmatningsfokus. Om du sedan klickar någonstans utanför inputfältet, kommer det att förlora inmatningsfokus och det går inte längre att skriva text i det.

För att fånga ögonblicket när ett inputfält får eller förlorar fokus, finns det i JavaScript speciella händelser: händelsen focus låter dig fånga när inputfältet får fokus, och händelsen blur - förlusten av fokus. Låt oss prova i praktiken. Låt oss säga att vi har ett inputfält:

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

Låt oss hämta en referens till det i en variabel:

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

Och låt oss nu göra så att när det får fokus skrivs den aktuella texten i inputfältet ut till konsolen:

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

Givet ett inputfält. När det får fokus, skriv talet 1 i det, och när det förlorar fokus - talet 2.

Givet ett inputfält. Låt ett tal skrivas in i det. När det förlorar fokus, skriv ut kvadraten av detta tal på skärmen.

Givet ett inputfält som initialt har någon text. När inputfältet får fokus, rensa innehållet i detta inputfält.