Textarea Sayaç Counter
Html - Css jQuery

Textarea Karakter Sayma

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

  • Reply
    pvp serverler
    22 Temmuz 2014 at 16:13

    teşekkürler hocam çok güzel bir anlatım olmuş. yalnız java çalıştıramadım bir türlü. akşam tekrar deneyeceğim.

  • Reply
    Kerim Ölmez
    2 Ağustos 2014 at 10:56

    Ç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.

  • Reply
    bornova kartuş
    6 Ağustos 2014 at 18:25

    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.

  • Reply
    Promosyon ürünleri
    7 Eylül 2014 at 21:47

    Konu anlatımı için teşekkürler demo adresi çalışmıyor bilginize

    • Reply
      İbrahim Yılmaz
      10 Eylül 2014 at 13:55

      Teşekkürler bilgi için ilgileneceğim.

  • Reply
    Promosyon hası takvim
    19 Eylül 2014 at 21:49

    Gayet başarılı olmuş.. Eline sağlık anlatım için

  • Reply
    Timur Demir
    27 Şubat 2015 at 01:54

    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ı ?

  • Reply
    emrah
    8 Mart 2016 at 13:38

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

  • Reply
    Muammer
    13 Mayıs 2018 at 12:57

    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 ?

Bir Cevap Yazın

%d blogcu bunu beğendi: