Web sitelerinde veya uygulamalarda kullanıcıların girdiği metinlerin belirli bir sınırda kalmasını sağlamak için karakter sayma ve kalan karakter sayısını gösterme özelliği çok önemlidir. Bu özellik, kullanıcı deneyimini iyileştirirken kullanıcıların gereksiz yere uzun metinler girmesini de engeller.

Özellikle sosyal medya, blog ve iletişim formlarında karakter sınırlaması kullanıcı açısından da rehberlik edicidir. JavaScript ile karakter sayacı oluşturmak oldukça basit olup HTML, CSS ve JavaScript üçlüsü ile hızlıca gerçekleştirilebilir. Kullanıcı metin alanına yazı yazdıkça anlık olarak karakter sayısını ve kalan karakter sayısını gösteren bu özellik, modern web tasarımlarında da sıklıkla kullanılır. JavaScript ile bir metin alanındaki karakter sayısını kontrol etmek için .length özelliği kullanılabilir. CSS yardımıyla bu karakter sayacını daha şık ve kullanıcı dostu hale getirebiliriz.

Günümüzde çoğu web uygulaması, kullanıcıların karakter sınırını geçmemesi için görsel geri bildirimler sağlamaktadır. Örneğin, kalan karakter sayısı belirli bir değerin altına düştüğünde, kullanıcıyı uyarmak için karakter sayacını kırmızı renge dönüştürebiliriz.

Bu tarz modern tasarım yaklaşımları, kullanıcıların görsel olarak sınırda olduklarını anlamalarını sağlar. Böylece web sitenizde hem estetik bir görünüm hem de fonksiyonel bir deneyim sunabilirsiniz.

HTML

  <div class="container">
    <h1>Karakter Sayacı</h1>
    <textarea id="text-input" maxlength="200" placeholder="Mesajınızı buraya yazın..."></textarea>
    <div id="char-counter">200 karakter kaldı</div>
  </div>

Javascript

document.addEventListener('DOMContentLoaded', function () {
  const textInput = document.getElementById('text-input');
  const charCounter = document.getElementById('char-counter');
  const maxLength = textInput.getAttribute('maxlength');

  textInput.addEventListener('input', function () {
	const remainingChars = maxLength - textInput.value.length;
	charCounter.textContent = `${remainingChars} karakter kaldı`;

	// Log çıkışı ile kontrol ediyoruz
	console.log("Remaining characters:", remainingChars);

	// Kalan karakter sayısı 20 veya daha az olduğunda kırmızı yap, değilse normal renk
	if (remainingChars <= 20) {
	  charCounter.classList.add('red-text');
	} else {
	  charCounter.classList.remove('red-text');
	}
  });
});

CSS

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #1e1e2f; /* Koyu mod arka plan rengi */
}

.container {
  text-align: center;
  width: 300px;
  padding: 20px;
  border-radius: 8px;
  background-color: #2e2e3e; /* Koyu mod konteyner arka planı */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

h1 {
  color: #ffffff; /* Başlık rengi */
}

textarea {
  width: 90%;
  height: 100px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #555;
  border-radius: 4px;
  resize: none;
  outline: none;
  background-color: #1e1e2f; /* Metin alanı arka planı */
  color: #ffffff; /* Metin rengi */
}

#char-counter {
  margin-top: 10px;
  font-size: 14px;
  color: #cccccc; /* Sayaç varsayılan rengi */
}

.red-text {
  color: #ff6b6b !important; /* Kırmızı uyarı rengi */
}

Yukarıda paylaştığım kodların çalışan bir örneğini aşağıda ki bağlantılardan inceleyebilirsiniz.

Javascript konusuyla ilgili yazdığım tüm yazıları bu bağlantıdan veya github hesabımdan inceyebilirsiniz.