Fokus textových polí v JavaScriptu

Mějme vstupní pole. Můžete na něj kliknout a poté v něm začne blikat kurzor a bude možné do něj vkládat text.

O tomto stavu se říká, že vstupní pole má vstupní fokus. V praxi to znamená, že pokud začnete psát text z klávesnice, tento text bude směřovat do toho vstupního pole, které má právě fokus. Pokud pak kliknete někam mimo vstupní pole, toto pole ztratí vstupní fokus a nebude do něj možné vkládat text.

Pro zachycení okamžiku získání nebo ztráty fokusu vstupním polem jsou v JavaScriptu k dispozici speciální události: událost focus umožňuje zachytit získání fokusu vstupním polem, a událost blur - ztrátu. Vyzkoušejme si to v praxi. Mějme vstupní pole:

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

Získáme na něj odkaz do proměnné:

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

A nyní uděláme tak, aby po získání fokusu byl do konzole vypsán aktuální text vstupního pole:

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