Fokus textových polí v JavaScripte

Majme vstupné pole. Môžete kliknúť na toto vstupné pole a potom v ňom začne blikať kurzor a budete doňho môcť vpisovať text.

O takomto stave sa hovorí, že vstupné pole má vstupný fokus. V praxi to znamená, že ak začnete písať text z klávesnice, tento text bude smerovať do toho vstupného poľa, ktoré má aktuálne vstupný fokus. Ak potom kliknete niekam mimo vstupného poľa, toto vstupné pole stratí vstupný fokus a nebude doňho možné písať text.

Na to, aby sme zachytili moment získania alebo straty fokusu vstupným poľom, sú v JavaScripte poskytnuté špeciálne udalosti: udalosť focus umožňuje zachytiť získanie fokusu vstupným poľom, a udalosť blur - stratu. Vyskúšajme si to v praxi. Majme vstupné pole:

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

Získajme naň odkaz do premennej:

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

A teraz urobme to, aby sa po získaní fokusu do konzoly vypísal aktuálny text vstupného poľa:

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

Dané vstupné pole. Po získaní fokusu zapíšte do neho číslo 1 a po strate fokusu - číslo 2.

Dané vstupné pole. Nech sa do neho zadáva číslo. Po strate fokusu vypíšte na obrazovku druhú mocninu tohto čísla.

Dané vstupné pole, v ktorom je spočiatku nejaký text. Po získaní fokusu vstupným poľom vyčistite jeho obsah.