JavaScript-те мәтін өрістерінің фокусы

Бізде инпут болсын. Сіз осы инпутты бассаңыз, содан кейін онда жыпылықтайтын курсор-таяқшық пайда болады және оған мәтін енгізуге болады.

Мұндай жағдай туралы инпуттың қазір енгізу фокусына ие екендігі айтылады. Тәжірибеде бұл дегеніміз, егер пернетақтадан мәтін енгізуді бастасақ, онда бұл мәтін қазір енгізу фокусына ие болған инпутқа енеді. Егер содан кейін инпуттан тыс жерді бассаңыз, онда бұл инпут енгізу фокусын жоғалтады және оған мәтін енгізу мүмкін болмайды.

Инпуттың фокусты алу немесе жоғалту сәтін ұстау үшін, JavaScript-те арнайы оқиғалар қарастырылған: focus оқиғасы инпуттың фокусты алуын ұстауға мүмкіндік береді, ал blur оқиғасы - жоғалтуын. Тәжірибеде көрейік. Бізде инпут болсын:

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

Оған сілтемені айнымалыға алайық:

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

Енді фокусты алу кезінде консольге инпуттың ағымдағы мәтіні шығарылуы үшін жасайық:

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

Инпут берілген. Фокусты алу кезінде оған 1 санын жазыңыз, ал фокусты жоғалту кезінде - 2 санын.

Инпут берілген. Оған сан енгізілсін. Фокусты жоғалту кезінде экранға осы санның квадратын шығарыңыз.

Инпут берілген, онда басында қандай да бір мәтін бар. Инпуттың фокусты алуы кезінде осы инпуттың мазмұнын тазалаңыз.