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:

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

Dohvatimo referencu na njega u promenljivu:

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

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

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

Data je polje za unos. Pri dobijanju fokusa upišite u njega broj 1, a pri gubitku fokusa - broj 2.

Data je polje za unos. Neka se u njega unosi broj. Pri gubitku fokusa ispišite na ekran kvadrat tog broja.

Data je polje za unos, u kojem inicijalno postoji neki tekst. Pri dobijanju fokusa od strane polja za unos, obrišite sadržaj tog polja.