Focusul câmpurilor text în JavaScript

Să presupunem că avem un câmp de introducere. Puteți face clic pe acest câmp și după aceea cursorul va începe să clipească și veți putea introduce text în el.

Despre această stare se spune că câmpul de introducere are în acest moment focusul de introducere. În practică, aceasta înseamnă că dacă începeți să introduceți text de la tastatură, acel text va ajunge în câmpul de introducere care are în acel moment focusul. Dacă apoi faceți clic undeva în afara câmpului, acesta va pierde focusul de introducere și nu se va mai putea introduce text în el.

Pentru a prinde momentul în care un câmp de introducere primește sau pierde focusul, în JavaScript există evenimente speciale: evenimentul focus permite detectarea primirii focusului de către câmp, iar evenimentul blur - pierderea acestuia. Să încercăm în practică. Să presupunem că avem un câmp de introducere:

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

Să obținem o referință la el într-o variabilă:

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

Și acum să facem astfel încât, la primirea focusului, să se afișeze în consolă textul curent din câmp:

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

Este dat un câmp de introducere. La primirea focusului scrieți în el numărul 1, iar la pierderea focusului - numărul 2.

Este dat un câmp de introducere. Să presupunem că în el se introduce un număr. La pierderea focusului afișați pe ecran pătratul acestui număr.

Este dat un câmp de introducere, în care inițial există un anumit text. La primirea focusului de către câmp, ștergeți conținutul acestui câmp.