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
Ülke Telefon Kodu Listeleme
Devamını Oku

Ülke Telefon Kodu Listeleme

Telefon numarası alanına ülkelerin telefon kodlarını listeleyip seçilen ülkenin telefon kodunu otomatik ekleten bir Javascript eklentisinden bahsettim. Yazımın devamını okuyup detaylı inceleyebilirsiniz.

Devamını Oku