Merhabalar,

Bu yazımda bazı sitelerde karşımıza çıkan ve kullanıcıyı etkileyen bir özelliğin yapımından bahsedeceğim. Amacımız, kullanıcının input yani veri girme alanına yazdığı değeri anlık olarak başka bir alanda göstermek olacak.

Örneğin, kullanıcı adını yazarken aşağıda "Merhaba girilen ad" şeklinde canlı bir karşılama mesajı göstermek isteyebilirsiniz.

HTML tarafında sadece bir input ve bir span kullanacağız:

<input id="deger" type="text">
<p>Merhaba, <span id="sonuc"></span></p>

Burada önemli olan, input ve span etiketlerine id atamış olmamızdır. Çünkü JavaScript ile bu elemanlara id üzerinden ulaşacağız.

Gelelim JavaScript tarafına:

const deger = document.getElementById('deger');
const sonuc = document.getElementById('sonuc');

const degerYakala = function(e) {
  sonuc.innerHTML = e.target.value;
}

deger.addEventListener('input', degerYakala);

Bu işlemin özeti şu şekildedir:

• const ile input ve gösterim alanını tanımlıyoruz.
• degerYakala adında bir fonksiyon oluşturup, inputa girilen değeri sonuc alanına yazdırıyoruz.
• addEventListener ile input’a her yazıldığında fonksiyonun tetiklenmesini sağlıyoruz.

Bu özellik kullanıcı deneyimini artırmak için oldukça etkilidir.

Canlı test için aşağıdaki bağlantıya göz atabilirsiniz:

CodePen: Javascript ile Yazılanı Anlık Yerleştirme

Umarım bir gün işinize yarar. Mutlu Kodlamalar :)