Metin Kutularına Karakter Sayacı Nasıl Eklenir?

Metin Kutularına Karakter Sayacı Nasıl Eklenir?

Merhaba Arkadaşlar,
Web kodlamayla ilgilenen arkadaşların pek çok kez başvurduğu, araştırdığı basit bir konudur metin alanlarına karakter sayacı eklemek…

Karakter Sayaçları Nerelerde Kullanılır?
– Kodladığınız bir web sayfasında kullanıcıdan almak istediğiniz veri formlarındaki karakter alanlarına eklenir. Böylece kullanıcı da yazabileceği karakter sayısını canlı olarak takip eder.
– Kodladığınız web sitesinde örneğin SEO Title ve SEO Description alanlarını doldururken Standart SEO Karakter genişliklerine uymak için bir otokontrol yapabilirsiniz.

Peki Metin Kutularına, Yazı Alanlarına Karakter Sayacı Nasıl Eklenir?
Öncelikle bu sayaç için küçük bir JS Koduna ihtiyacımız var. Bu kodu dilersek ayrı bir .js olarak çağırabilir; dilersek de sayfa içine gömebiliriz. Burası tamamen size kalmış 🙂

JavaScript Kodu:

(() => {
  const counter = (() => {
    const input = document.getElementById('freeatlas-sayac'),
    display = document.getElementById('freeatlas-gosterim'),
    changeEvent = evt => display.innerHTML = evt.target.value.length,
    getInput = () => input.value,
    countEvent = () => input.addEventListener('keyup', changeEvent),
    init = () => countEvent();
return {
      init: init };
  })();
counter.init();
})();

JavaScript kodumuzu ayrı bir dosya olarak veya çalıştığımız sayfaya eklediğinizi varsayarak devam ediyoruz.

Şimdilik sayacımızın en önemli noktasını hallettik. Sıra sayacı ekleyeceğimiz metin alanınızda bu JS’yi atamak.

Input’a veya TextArea Alanına ID Atamak
Örnek bir Input veya TextArea Oluşturalım ve karakter sayacımızı ID olarak ekleyelim.

<input id="freeatlas-sayac" type="text" />

veya

<textarea id="freeatlas-sayac"></textarea>