Textarea Karakter Sayma

Textarea Sayaç Counter

Merhaba, geçenlerde şirketimiz için yaptığımız projede Sms modülü yazarken textarea da sayaç ihtiyacımız oldu. Bende kodları hızlı bir şekilde şirketten çıkmadan önce burada taslağa atmıştım. Şimdi de onları paylaşmak istedim. Aşağıdaki kodlar metin kutusuna yazılan karakterleri saymaktadır. İlk kodları sitedeetiketinden önce yerleştiriniz. Ben burada klasik sms karakter sınırı 160 olduğu için 160 karakterden sonra saymayı renkli yaptırdım. Sizler de istediğiniz bir şekilde karakterleri sınırlayabilir, saydırabilirsiniz.

Örnek Görsel

Textarea Sayaç Counter
Textarea Sayaç

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	var say = 0; // var olan değer
	$('textarea').bind('keydown keyup keypress change',function(){
		var thisValueLength = $(this).val().length;
		var saymax = (say)+(thisValueLength); // var olan değerin üzerine say
		$('.say').html(saymax);

		if(saymax > 160){ // karakter sayısı 160 tan fazla olursa kırmızı yaz
			$('.say').css({color:'#ff0000',fontWeight:'bold'});
		} else { // karakter sayısı 160 tan az ise siyah yaz
			$('.say').css({color:'#000000',fontWeight:'bold'});
		}
	});
	$(window).load(function(){
		$('.say').html(say); // .say class yapısının olduğu yere yazdır
	});
});
</script>

Daha sonra da metin kutusunun olduğu yere kodlarımızı yerleştirelim.

<textarea id="" style="width: 350px; height: 100px;" name=""></textarea></pre>
<div style="float: left; margin-top: 10px; font-weight: bold;">Karakter Sayısı:&nbsp</div>
<div class="say" style="float: left; margin-top: 10px; font-weight: bold;">0</div>

Demo için: http://ibocan.net/depo/test/textarea-sayac.html

Eğer ki twitter tarzı bir geri saydırma yaptırmak istiyorsak kodlarda ufak bir değişiklik yapmak gereklidir.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(function(){
	var say1 = 140; // var olan değer
	$('textarea').bind('keydown keyup keypress change',function(){
		var thisValueLength = $(this).val().length;
		var saymin = (say1)-(thisValueLength); // var olan değerden çıkar
		$('.say1').html(saymin);

		if(saymin < 0){ // karakter sayısı 0 tan düşerse kırmızı yaz
			$('.say1').css({color:'#ff0000',fontWeight:'bold'});
		} else { // karakter sayısı 0 ile 140 arası ise siyah yaz
			$('.say1').css({color:'#000000',fontWeight:'bold'});
		}
	});
	$(window).load(function(){
		$('.say1').html(say1); // .say1 class yapısının olduğu yere yazdır
	});
});
</script>

Daha sonra metin kutusu kodlarımızı yerleştirelim.

<textarea name="" id="" style="width:350px;height:100px;"></textarea></br>
<div style="float:left;margin-top:10px;font-weight:bold">Karakter Sayısı:&nbsp</div>
<div class="say1" style="float:left;margin-top:10px;font-weight:bold">140</div>

Demo: http://ibocan.net/depo/test/textarea-twitter-sayac.html

9 Yorum

  • Çalışma diğer örneklere nazaran güzel ve temiz olmuş, nadiren de olsa kelime sayacına ihtiyaç duyulan alanlar oluyor, bu çalışmanın devamına kelime sayılımınıda eklerseniz eğer daha iyi ve fonksiyonel olacağı şüphesiz, bununla birlikte birçok kullanıcı ve yazara örnek teşkil edeceği, fayda sağlayacağı düşüncesindeyim.
    Bilgilendirmeleriniz için teşekkür eder, iyi çalışmalar dilerim.

  • Güzel ve faydalı bir çalışma olmuş. Eminim ki bir çok insan bu kodları kendi web sitelerine entegre edeceklerdir buna ben de dahilim. Teşekkür ederiz elinize sağlık.

  • Merhabalar. CSS ve HTML konusunda Türk Ekip’in Dreamweaver ile Css ve Xhtml Tablosuz Tasarım Eğitim Seti’ni almayı düşünüyorum sizce bana bir şeyler öğretme konusunda katkı sağlar mı? Ya da sizin önerebileceğiniz eğitim setleri var mı ?

  • Makalenizi tesadüfen gördüm yalnız çalıştırmadım bir uygulamayı tekrar deneyeceğim teşekkürler.

  • Ustad şimdi elimdeki bu kodu şu şekilde nasıl yapabiliris ?

    1 > 150 karakter arası 1
    150 > 300 karakter arası 2
    300 > 450 karakter arası 3 sayısını yardırıp kullanıcı sayısına çarpıp elime sayıyı almak istiyorum nasıl yaparım ?

Yorum Yaz:

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir