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:

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

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

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

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