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:

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

Získajme naň odkaz do premennej:

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

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