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:

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

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

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

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

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

Bir input verilmiştir. Odak kazanıldığında içine 1 sayısını yazın, ve odak kaybedildiğinde - 2 sayısını yazın.

Bir input verilmiştir. İçine bir sayı girilsin. Odak kaybedildiğinde ekrana bu sayının karesini yazdırın.

Başlangıçta içinde bir metin bulunan bir input verilmiştir. Input odak kazandığında bu inputun içeriğini temizleyin.