Szövegmezők fókusza JavaScriptben

Tegyük fel, van egy input mezőnk. Rákattinthat erre az input mezőre, és ezután elkezd villogni benne a kurzor, és szöveget lehet beírni.

Erre az állapotra azt mondjuk, hogy az inputnak jelenleg beviteli fókusza van. A gyakorlatban ez azt jelenti, hogy ha a billentyűzetről elkezdjük gépelni a szöveget, akkor az a szöveg abba az input mezőbe kerül, amelyik jelenleg fókuszában van. Ha ezután az input mezőn kívülre kattintunk, akkor az input mező elveszíti a beviteli fókuszt, és nem lehet bele szöveget beírni.

Ahhoz, hogy elkapjuk azt a pillanatot, amikor az input megkapja vagy elveszíti a fókuszt, a JavaScript speciális eseményeket biztosít: a focus esemény lehetővé teszi, hogy elkapjuk a fókusz megszerzését, míg a blur esemény - a fókusz elvesztését. Próbáljuk ki a gyakorlatban. Tegyük fel, van egy input mezőnk:

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

Szerezzük meg a hivatkozást rá egy változóba:

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

És most tegyük úgy, hogy a fókusz elérésekor a konzolra kiírjuk az input aktuális szövegét:

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

Adott egy input mező. Fókusz elérésekor írjon bele 1 számot, fókusz elvesztésekor pedig - 2 számot.

Adott egy input mező. Tegyük fel, hogy számot írnak bele. Fókusz elvesztésekor írja ki a képernyőre a szám négyzetét.

Adott egy input mező, amelyben eredetileg van valamilyen szöveg. Az input fókuszában történő aktiválásakor törölje az input tartalmát.