Fokus besedilnih polj v JavaScript

Recimo, da imamo vnosno polje. Lahko kliknete na to vnosno polje in potem bo v njem utripal kazalec-palica in vanj lahko vnašate besedilo.

O takem stanju rečemo, da ima vnosno polje trenutno vnosni fokus. V praksi to pomeni, da če začnete vnašati besedilo s tipkovnico, bo to besedilo prišlo v tisto vnosno polje, ki ima trenutno vnosni fokus. Če nato kliknete kamorkoli zunaj vnosnega polja, bo to vnosno polje izgubilo vnosni fokus in vanj ne bo več mogoče vnašati besedila.

Da bi ujeli trenutek pridobitve ali izgube fokusa vnosnega polja, so v JavaScript na voljo posebni dogodki: dogodek focus omogoča ujeti pridobitev fokusa vnosnim poljem, dogodek blur pa izgubo. Preizkusimo v praksi. Recimo, da imamo vnosno polje:

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

Dobimo referenco nanj v spremenljivko:

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

In zdaj naredimo tako, da se ob pridobitvi fokusa v konzolo izpiše trenutno besedilo vnosnega polja:

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

Podano je vnosno polje. Ob pridobitvi fokusa vpišite vanj število 1, ob izgubi fokusa pa - število 2.

Podano je vnosno polje. Naj se vanj vnaša število. Ob izgubi fokusa izpišite na zaslon kvadrat tega števila.

Podano je vnosno polje, v katerem je sprva nek besedilo. Ob pridobitvi fokusa vnosnega polja počistite vsebino tega vnosnega polja.