Sayaç Kontrollü Yazı Kutusu (Textbox Text Counter)

Mesaj Kutusu Sayacı

Bazı durumlarda mesaj alanlarına yazılacak yazılar için girilen harf miktarını saymak ve bu rakamı görsel olarak kullanıcıya iletmek isteyebiliriz. Aşağıdaki kod örneği mesaj alanlarınıza girilen harf miktarını sayarak kullanıcıya iletmenizi sağlayacaktır.

HTML sayfamızın <body></body> etiketeri arasına gelecek HTML kod:

<label>Mesaj:</label>
<label id=”lblSayac”
style=”color:FF0000;
font-weight:bold;
margin-left:240px;
width:40px”>100</label><br>
<textarea id=”txtMesaj”
style=”height:240px;
width:320px”
onkeypress=”checksize(this, ‘lblSayac’, 100);”>
</textarea>

Karakter sayacının çalışması için <head></head> etiketleri arasına yazılacak JavaScipt kodu:

<script language=”javascript” type=”text/javascript”>
//<![CDATA[
function checksize(obj1, obj2, limit)
{
var count;
var max = limit;
var calc = 0;
lbl = document.getElementById(obj2);
count = obj1.value.length;
calc = max - count;
if(calc<0){
calc=0;
obj1.value=obj1.value.substr(0,max);
}
lbl.innerHTML = calc;
}
//]]>
</script>

Yukarıdaki kod öreneği mesaj kutusuna girilen her karakteri mesaj için belirtilen karakter miktarından çıkararak kullanıcaya iletir. Eğer kullanıcı belirtilen miktarın üstünde karakter girmeye çalışırsa karakter girişi kabul edilmez.

Not: Yukarıdaki kod örneği sadece tuşlara basıldığında çalışacak şekildedir, kopyala-yapıştır yöntemi ile eklenen yazıların karakter miktarını hesaplamayacaktır. Eğer mesaj kutunuzun kopyala-yapıştır yöntemi ile gelen yazıları da hesaplamasını istiyorsanız. Mesaj gönderim işlemini gerçekleştirmeden önce “checksize” fonksiyonunu tekrar çalıştırmalısınız.

Dosya:

http://www.webtasarimcisi.com/erkana/SayacliYaziKutusu.zip

Şu ana kadar 1 yorum

  1. Ahmet on Mayıs 4, 2008

    Güzelmiş kullanışlıya benziyo…

Leave a reply