JavaScript-də mətn sahələrinə fokuslanma

Tutaq ki, bizim bir input sahəmiz var. Siz bu inputa klikləyə bilərsiniz və ondan sonra içərisində kursor yansın və siz ora mətn daxil edə bilərsiniz.

Bu vəziyyət üçün deyilir ki, inputun hazırda daxiletmə fokusu var. Təcrübədə bu o deməkdir ki, əgər klaviaturanızdan mətn daxil etməyə başlasanız, bu mətn hazırda fokusda olan inputa daxil olacaq. Əgər daha sonra inputun xaricində hər hansı bir yerə klik etsəniz, bu input fokusu itirəcək və ona mətn daxil etmək mümkün olmayacaq.

Inputun fokusu əldə etmə və ya itirmə anını yaxalamaq üçün JavaScript-də xüsusi hadisələr nəzərdə tutulub: focus hadisəsi inputun fokusu əldə etməsini yaxalamağa imkan verir, blur hadisəsi isə - itirməni. Gəlin təcrübədə yoxlayaq. Tutaq ki, bizim inputumuz var:

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

Gəlin onu dəyişənə istinad edək:

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

İndi isə elə edək ki, fokus əldə edildikdə konsola inputun cari mətni çıxarılsın:

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

Input verilib. Fokus əldə edildikdə onun içinə 1 rəqəmini yazın, fokus itirildikdə isə - 2 rəqəmini.

Input verilib. Tutaq ki, onun içinə rəqəm daxil edilir. Fokus itirildikdə ekrana həmin rəqəmin kvadratını çıxarın.

İçərisində əvvəlcədən hansısa mətn olan input verilib. Input tərəfindən fokus əldə edildikdə bu inputun tərkibini təmizləyin.