Merhabalar,
Bazı sitelerde karşımıza çıkan ve kullanıcıyı oldukça etkilediğini düşündüğüm bir özelliğin yapımından bahseceğim. Amacımız kullanıcının input yani veri girme alanına girdiği metin veya sayı gibi karakterleri anlık olarak başka bir alanda göstermek olmaktadır.
Daha iyi anlamanız için örneğin kullanıcının adını istediğiniz bir input ve onu değer girdikçe altında “Merhaba girilen değer” olarak bir karşılama mesajı verebilirsiniz.
Html tarafında yapılacak kısa işlemi öncelikle yapalım. Ekleyeceklerimiz sadece değer girilen bir input ve sonucu gösterebileceğimiz istediğiniz bir etiket olacaktır.
<input id="deger" type="text" />
<p>Merhaba, <span id="sonuc"></span></p>Burada dikkat etmemiz gereken noktalar elemanların id değerleri olmaktadır. Javascript ile id üzerinden erişim sağlayacağız.
Diğer yandan sabit olan bölüm p etiketi, değişecek ve yanına eklenecek yine id üzerinden eşleştireceğimiz span olduğunu bilmemiz yeterli olacaktır.
Gelelim Javascript kodumuza;
const deger = document.getElementById('deger');
const sonuc = document.getElementById('sonuc');
const degerYakala = function(e) {
sonuc.innerHTML = e.target.value;
}
deger.addEventListener('input', degerYakala);Evet işlemimiz bu kısa koddan oluşuyor. Kısaca özetleyecek olursak;
- id değerlerinden seçtiğimiz elemanları const ile sabit değişkenlere atadık.
- Yine const ile (const tipini kullanmanız zorunlu değil) bir fonksiyon oluşturup aldığı parametre olan değeri id değeri sonuc yani ekrana basmasını istediğimiz yere bir nevi yazdırıyoruz.
- Her yazıldığında bunu algılayacak olan Javascript addEventListener fonksiyonuna deger değişkeni üzerinden input olayını tetiklemesi anında bir üstünde tanıttığımız degerYakala fonksiyonunu çağırmasını söylüyoruz.
İşlemlerimiz bu kadar. Aşağıda codepen penceresini canlı olarak test edip yine kaynak kodlara ulaşabilmeniz için bırakıyorum inceleyebilirsiniz.
See the Pen Javascript ile Yazılanı Anlık Yerleştirme by furkangiray.com (@furkangiray_com) on CodePen.
Kullanıcılarınız tarafından etkili olarak değerlendireceklerini düşündüğüm bir özelliktir. Umarım bir yerde işinize yarar.
Mutlu Kodlamalar 🙂
