Yazılanı Anlık Yerleştirme

Javascript ile Yazılanı Anlık Yerleştirme
Javascript ile Yazılanı Anlık Yerleştirme
Javascript ile kullanıcının input alanına girdiği metin veya sayı gibi karakterleri anlık olarak başka bir alanda gösterme işlemi örneğidir. Detaylar için devamını okuyabilirsiniz.

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 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.

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 🙂

0 Shares:

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
Javascript - Kar Yağışı
Devamını Oku

Kar Yağışı Efekti

Web sayfanıza ekleyebileceğiniz Javascript ve Css animasyonları ile kar yağışı efekti uygulanmıştır. Nasıl yapıldığını merak ediyorsanız yazımı detaylı inceleyebilirsiniz..

Devamını Oku

Butona Dalga Efekti Verme
Devamını Oku

Butona Dalga Efekti Verme

Çoğunlukla android cihazlarda veya materializecss.com üzerinde görebileceğiniz butona tıklandığında oluşan dalga efektinden bahsettim. Merak edenler için yazının devamını okuyabilirsiniz.

Devamını Oku