Fokus tekstualnih polja u JavaScriptu

Neka imamo polje za unos (input). Možete kliknuti na ovo polje i nakon toga u njemu će treptati kursor i moći ćete da unosite tekst u njega.

Za ovo stanje kažemo da polje za unos trenutno ima fokus unosa. U praksi to znači da ako počnete da unosite tekst sa tastature, taj tekst će ići u ono polje za unos koje trenutno ima fokus unosa. Ako zatim kliknete negde van polja za unos, to polje će izgubiti fokus unosa i nećete moći da unosite tekst u njega.

Da bismo uhvatili trenutak dobijanja ili gubitka fokusa od strane polja za unos, u JavaScript-u postoje posebni događaji: događaj focus omogućava da se uhvati dobijanje fokusa, a događaj blur - gubitak. Isprobajmo u praksi. Neka imamo polje za unos:

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

Dohvatimo referencu na njega u promenljivu:

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

A sada napravimo da se pri dobijanju fokusa u konzolu ispiše trenutni tekst polja za unos:

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