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:

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

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

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

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

Je dáno vstupní pole. Po získání fokusu zapište do něj číslo 1, a po ztrátě fokusu - číslo 2.

Je dáno vstupní pole. Nechť se do něj zadává číslo. Po ztrátě fokusu vypište na obrazovku druhou mocninu tohoto čísla.

Je dáno vstupní pole, ve kterém je inicialně nějaký text. Po získání fokusu vstupním polem vyčistěte jeho obsah.