Anlık Girilen Karakteri Sayma

Anlık Girilen Karakteri Sayma
Anlık Girilen Karakteri Sayma
Javascript ile input, textarea vb. değer girilebilen elemanlara karakter girildikçe bu sayıyı ekrana basan bir uygulama örneğinden bahsettim. Nasıl yapılacağına dair detaylar için yazımı inceleyebilirsiniz.

Merhabalar,

Bu yazımda Javascript ile bir input, textarea vb. değer girilebilen elemanlara karakter girildikçe bu sayıyı ekrana basan bir uygulama örneğinden bahsedeceğim.

Bazı formlarda görebilirsiniz ayrıca HTML üzerinde onkeyup attribute (niteliği) kullanımını kavramanız açısından da güzel bir örnek olacaktır. Her tuşa basıldığında bir fonksiyon çalıştıracak fonksiyon adını tırnak içine yazacağız.

Fonksiyonun içinde ise de metin uzunluğunu alıp ekrana basacağız her bir girişte fonksiyon kendini güncelleyecek bu sayede güncel değerler yazılacaktır.

Hemen başlayalım ben örnek olarak textarea kullanacağım ama input elemanlarında da onkeyup kullanabilirsiniz. 

<textarea onkeyup="karakterSay(this.value);" rows="5"></textarea> 
<p><b>Toplam Karakter: </b> <span id="sonuc"></span> </p> 

karakterSay() fonksiyonu her bir karakter girişinde onkeyup niteliğiyle birlikte çalışacaktır.

Hemen altında ise toplam karakteri gösteren bir metin ve toplamı gösteren sonuc id’li bir span ekledim.

Javascript tarafında da karakterSay() fonksiyonunu oluşturalım.

<script>
    function karakterSay(metin)
    {
      var toplam = metin.length; // parametreden gelen uzunluk
      document.getElementById("sonuc").innerHTML = toplam;
      // sonuc id'li elemana bu degeri yazdir.
    }
</script> 

İşlemimiz bu kadar. Her karakter girildiğinde alt kısımda toplam karakteri güncelleyen bir işlem olmuştur. If else ile sınır koyabilir veya farklı şekillerde değerlendirebilirsiniz.

Umarım anlaşılır olmuştur ve işinize yarar.

Mutlu Kodlamalar 🙂

0 Shares:

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
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

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