Metin Alanlarında Odaklanma JavaScript

Bir input elemanımız olduğunu varsayalım. Bu inputa tıklayabilir ve ardından içinde yanıp sönen bir imleç göreceksiniz ve ona metin girebileceksiniz.

Bu durum için, inputun şu anda giriş odağına sahip olduğu söylenir. Pratikte bu, klavyeden metin girmeye başladığınızda, bu metnin şu anda giriş odağına sahip olan inputa gireceği anlamına gelir. Eğer daha sonra inputun dışına tıklarsanız, bu input odağı kaybeder ve içine metin yazılamaz.

Bir inputun odak kazanma veya kaybetme anını yakalamak için, JavaScript'te özel olaylar sağlanmıştır: focus olayı inputun odak kazanmasını yakalamaya izin verir, ve blur olayı - odak kaybını. Pratikte deneyelim. Bir inputumuz olduğunu varsayalım:

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

Onu bir değişkene referans olarak alalım:

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

Şimdi, odak kazanıldığında konsola inputun mevcut metninin yazılmasını sağlayalım:

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