Skip to content
Ağustos 9, 2007 / Erkan

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

3 Yorum

Yorum Yapın
  1. Ahmet / May 4 2008 5:55 pm

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

  2. Eray / Şub 12 2011 4:30 pm

    Peki hocam bunu asp.net’te nasıl kullanabiliriz ?
    runat=”server” olduğunda bu kod çalışmıyor.Olmadığı zamanda asp algılamıyor :S

    • Erkan / Şub 13 2011 12:36 am

      Kodun .net ile çalışmaması için hiç bir engel yok. runat=”server” asp .net etiketini kullandığınızda HTML etiketlerine ait “ID” değerleri asp .net tarafından değiştirilir ve istemciye bu şekilde yansır, kodun çalışmamasının nedeni de bu olmalı.

      ASP .Net ile yazdığınız kodun HTML çıktısına bakarak HTML etiketlerine ait ID değerlerini öğrenerek kodda yer alan ID değerlerini düzenlemelisiniz.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s

%d blogcu bunu beğendi: