Javascript İle Tarayıcı Tabanlı Bir Karakter Uzunluk Hesaplayıcı Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi gerçekleştirmek için herhangi bir sunucu tarafı diline veya karmaşık kütüphanelere ihtiyacınız yoktur. Sadece modern bir web tarayıcısı (Chrome, Firefox veya Edge) ve temel bir kod editörü (VS Code gibi) yeterlidir.

• HTML5: Sayfa yapısını oluşturmak için.
• CSS3: Görsel geri bildirimi (renk değişimi vb.) sağlamak için.
• JavaScript (ES6+): Mantıksal hesaplamaları yürütmek için.

Çalışmalarınızı bir index.html dosyası oluşturarak başlatabilirsiniz. Tüm kodları tek bir dosya içerisinde yazabileceğiniz gibi, ölçeklenebilirlik adına JavaScript kodlarını ayrı bir script.js dosyasında tutmanız önerilir.

Adım 1: HTML Yapısını Oluşturma

Karakter sayacı için gerekli olan temel HTML iskeleti, kullanıcının veri gireceği bir textarea ve sonucu göstereceğimiz bir span veya div etiketinden oluşur.

  Mesajınız:
  
  
Karakter Sayısı: 0/200

Burada maxlength niteliği, tarayıcının yerleşik bir sınır koymasını sağlar. Ancak biz JavaScript ile bu süreci daha dinamik hale getireceğiz.

Adım 2: JavaScript ile Temel Hesaplama

Kullanıcının her tuş vuruşunda karakter sayısını güncellemek için input olay dinleyicisini (event listener) kullanırız. Bu yöntem, kopyala-yapıştır işlemlerini de yakaladığı için keydown olayından daha güvenilirdir.

const metinAlani = document.getElementById('metinAlani');
const karakterSayaci = document.getElementById('karakterSayaci');

metinAlani.addEventListener('input', () => {
    const mevcutUzunluk = metinAlani.value.length;
    karakterSayaci.textContent = mevcutUzunluk;
});

Bu kod bloğu, input tetiklendiği anda textarea içerisindeki değerin uzunluğunu alır ve span etiketinin içeriğini günceller.

Adım 3: Görsel Geri Bildirim ve Sınır Kontrolü

Kullanıcı sınıra yaklaştığında sayacın rengini değiştirmek, kullanıcı deneyimini (UX) iyileştirir. Örneğin, 180 karakterden sonra sayacı kırmızı yaparak uyarı verebiliriz.

metinAlani.addEventListener('input', () => {
    const uzunluk = metinAlani.value.length;
    karakterSayaci.textContent = uzunluk;

    if (uzunluk > 180) {
        karakterSayaci.style.color = 'red';
    } else {
        karakterSayaci.style.color = 'black';
    }
});

Bu mantık, kullanıcıya sınırın yaklaştığını görsel bir ipucu ile bildirir. Kodunuzda style nesnesini doğrudan değiştirmek yerine CSS sınıfları ekleyip çıkarmak daha temiz bir yaklaşımdır.

Adım 4: Karakter Uzunluk Hesaplama Yöntemlerinin Karşılaştırılması

Karakter sayımı yaparken farklı ihtiyaçlara göre farklı yöntemler kullanılabilir. Aşağıdaki tablo, yaygın yaklaşımları özetlemektedir.

Adım 5: Modern ve Güvenli Sayım (Unicode Desteği)

Günümüzde emojiler ve özel semboller metinlerde sıkça kullanılır. Standart .length özelliği bazı emojileri 2 karakter olarak sayabilir. Modern bir yaklaşım için Intl.Segmenter kullanmak en doğrusudur.

function karakterSayiciGelistirilmis(metin) {
    const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
    return [...segmenter.segment(metin)].length;
}

metinAlani.addEventListener('input', () => {
    const sayim = karakterSayiciGelistirilmis(metinAlani.value);
    karakterSayaci.textContent = sayim;
});

Bu yöntem, kullanıcının girdiği metnin görsel karakter sayısını tam olarak verir. 2026 standartlarında bu yaklaşım, özellikle global uygulamalar için önerilir.

Güvenlik Uyarısı: Tarayıcı tabanlı karakter sayımı yalnızca kullanıcı deneyimi içindir. Veritabanı bütünlüğünü korumak için, gönderilen veriyi sunucu tarafında (Node.js, PHP vb.) mutlaka tekrar doğrulamalısınız. İstemci tarafındaki kontroller kolayca bypass edilebilir.

Adım 6: Hata Ayıklama ve Yaygın Sorunlar

Geliştirme yaparken karşılaşabileceğiniz en yaygın hata, kopyala-yapıştır işlemlerinin sayılmamasıdır. keyup yerine input olayını kullanmak bu sorunu çözer. Ayrıca, textarea içerisindeki boşlukların da birer karakter olduğunu unutmayın.

// Boşlukları temizleyerek saymak isterseniz:
const gercekUzunluk = metinAlani.value.trim().length;

Eğer trim() metodunu kullanırsanız, metnin başındaki ve sonundaki boşluklar sayıma dahil edilmez. Uygulamanızın amacına göre bu tercihi yapmalısınız.

Sıkça Sorulan Sorular

Karakter sayacı neden bazen yanlış sonuç veriyor?

JavaScript'in .length özelliği UTF-16 kod birimlerini sayar. Emojiler veya bazı özel karakterler birden fazla kod birimi kaplayabilir. Bu yüzden Intl.Segmenter gibi modern API'leri tercih etmelisiniz.

Bu sayaç mobil cihazlarda çalışır mı?

Evet, input olayı mobil tarayıcılarda da tetiklenir. Dokunmatik klavyelerden girilen veriler anlık olarak yakalanır.

Maksimum karakter sınırını nasıl zorunlu kılarım?

HTML'deki maxlength niteliği tarayıcı tarafından zorunlu kılınır. Ancak JavaScript ile event.preventDefault() kullanarak bunu daha karmaşık kurallara bağlayabilirsiniz.

Sunucu tarafında doğrulama yapmak zorunda mıyım?

Evet, kesinlikle. İstemci tarafındaki JavaScript kodları kullanıcı tarafından devre dışı bırakılabilir veya manipüle edilebilir. Veri güvenliği için sunucu tarafında her zaman uzunluk kontrolü yapın.

Performans kaybı yaşar mıyım?

Basit bir karakter sayacı için performans kaybı ihmal edilebilir düzeydedir. Ancak çok büyük metin bloklarında (binlerce karakter) sayım yaparken debounce (işlemi geciktirme) tekniğini kullanabilirsiniz.

Gelişmiş Senaryolar: Karakter Sayacını Bileşen (Component) Olarak Tasarlamak

Modern web uygulamalarında, aynı karakter sayacını farklı form alanlarında tekrar tekrar kullanmak kod tekrarına yol açar. Bu sorunu çözmek için JavaScript'in ES6 sınıf yapısını kullanarak "yeniden kullanılabilir" bir bileşen oluşturabiliriz. Bu yaklaşım, sayacın mantığını DOM yapısından ayırarak daha temiz bir mimari sunar.

Aşağıdaki örnekte, belirli bir textarea ve ona bağlı bir span etiketiyle çalışan, yapılandırılabilir bir sınıf yapısını inceleyelim:

class CharacterCounter {
  constructor(inputElement, displayElement, maxLength) {
    this.input = inputElement;
    this.display = displayElement;
    this.maxLength = maxLength;

    this.input.addEventListener('input', () => this.update());
    this.update();
  }

  update() {
    const currentLength = this.input.value.length;
    this.display.textContent = `${currentLength} / ${this.maxLength}`;
    
    if (currentLength > this.maxLength) {
      this.display.style.color = 'red';
    } else {
      this.display.style.color = 'black';
    }
  }
}

// Kullanımı:
const myTextarea = document.querySelector('#bio');
const myCounter = document.querySelector('#counter-text');
new CharacterCounter(myTextarea, myCounter, 200);

Performans Optimizasyonu: Debounce Mekanizması

Kullanıcı çok hızlı veri girişi yaptığında, her tuş vuruşunda DOM manipülasyonu yapmak tarayıcıyı yorabilir. Özellikle karmaşık hesaplamalar veya anlık API istekleri tetikleniyorsa, Debounce (gecikmeli çalıştırma) tekniği hayati önem taşır. Bu teknik, fonksiyonun çağrılmasını belirli bir süre bekletir ve bu süre içinde yeni bir tetikleme gelirse sayacı sıfırlar.

Aşağıdaki kod bloğu, karakter sayacını daha verimli hale getirmek için basit bir debounce mantığını göstermektedir:

function debounce(func, delay) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

const handleInput = debounce((e) => {
  console.log("Karakter sayısı güncellendi:", e.target.value.length);
  // Burada DOM güncelleme işlemlerini yapabilirsiniz
}, 300);

document.querySelector('#inputField').addEventListener('input', handleInput);

Neden Debounce Kullanmalıyız?

• CPU Kullanımını Azaltır: Sürekli DOM güncellemesi yerine, kullanıcı yazmayı kısa süreliğine durdurduğunda işlem gerçekleşir.
• Görsel Titremeyi Engeller: Çok hızlı güncellemelerde oluşan ekran titremelerinin önüne geçer.
• API Entegrasyonlarında Güvenlik: Eğer karakter sayısını sunucuya gönderiyorsanız, her tuş vuruşunda istek atmak yerine 300ms beklemek sunucu üzerindeki yükü %90 oranında azaltabilir.

Test Süreçleri ve Uç Durum (Edge Case) Yönetimi

Bir karakter sayacının doğruluğunu garanti etmek için sadece standart metinleri değil, "uç durumları" da test etmelisiniz. Aşağıdaki tablo, test etmeniz gereken temel senaryoları özetler:

Testlerinizi yaparken console.assert() metodunu kullanarak kodunuzun beklenen değerleri döndürüp döndürmediğini tarayıcı konsolunda hızlıca kontrol edebilirsiniz. Örneğin: console.assert(countCharacters("a") === 1, "Hata: 1 karakter sayılmalıydı");

Sonuç

JavaScript ile tarayıcı tabanlı bir karakter uzunluk hesaplayıcı yapmak, hem kullanıcı etkileşimini artıran hem de formlarınızın daha profesyonel görünmesini sağlayan temel bir beceridir. Bu rehberde, basit length kullanımından modern Intl.Segmenter yaklaşımına kadar geniş bir yelpazeyi ele aldık.

Bir sonraki adım olarak, bu sayacı bir "Debounce" mekanizması ile birleştirerek performans optimizasyonu yapmayı veya sayacı bir bileşen (component) haline getirerek farklı projelerinizde tekrar kullanılabilir bir yapı kurmayı deneyebilirsiniz. Kod yazarken her zaman kullanıcı deneyimini ve veri güvenliğini ön planda tutmayı unutmayın.

Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamında kullanmadan önce güvenlik açıklarına karşı test edilmeli ve sunucu tarafı doğrulamaları ile desteklenmelidir. Yazılım geliştirme süreçlerinde oluşabilecek veri kayıplarından veya güvenlik açıklarından yazar sorumlu tutulamaz.