Gezdiğiniz birçok sitede görebileceğiniz form karakter sayıcılarının nasıl yapıldığını ve sitenize nasıl konulduğunu merak ediyorsanız gerekli açıklamalar yazıda mevcut. Forma girdiğiniz karakter sayısını yan taraftaki küçük kutucukta gösterme işlemi ile ilgilenen veya maksimum karakter sayısı aşıldığında ekrana bir uyarı yazan bu javascript kod ve açıklaması için makaleyi okuyunuz.

Javascript Karakter Sayıcı - Formlar İçin

Kurulum aşamasına geçmeden önce script hakkında ufak bir açıklamada bulunalım. Kullandığımız bu küçük javascript kodu ve yardımcı form kodlarıyla belirlediğimiz sayıdan geriye doğru sayma işlemi yapan ve sayı 0 olduğu zaman bize uyarıda bulunan ve daha fazla karakter girilmesini engelleyen bir görevi vardır.

Kurulumu: İlk olarak aşağıdaki javascript kodu, sayma işlemini yapacağımız sayfaya veya hali hazırda bir javascript dosyası kullanıyor ve bu dosyayı head etiketinden önce include ediyorsanız kullandığınız .js uzantılı dosya içine ekleyiniz.

function karaktersayma(alan, say, maksimum) {
if (alan.value.length > maksimum) {
alan.value = alan.value.substring(0, maksimum);
alert("En fazla "+maksimum+" karakter kullanınız.");
} else {
say.value = maksimum - alan.value.length;
}}

Bu aşamadan sonra kodun javascript kısmını yerleştirmiş oluyoruz şimdi ise yapmamız gereken içindeki karakteri sayacağımız forma gerekli bilgileri eklemek olacaktır.

Normal Input lar için;

<input name="form1" type="text" size="60" wrap="virtual" onKeyDown="karaktersayma(this.form.form1,this.form.remaining,60);" onKeyUp="karaktersayma(this.form.form1,this.form.remaining,60);">

Textarea İçin;

<textarea name="text1" wrap="virtual" onKeyDown="karaktersayma(this.form.text1,this.form.remaining,500);" onKeyUp="characterCount2(this.form.text1,this.form.remaining,500);"> </textarea>

Şeklinde olmalıdır. Kodu biraz inceleyecek olursak. Her bastığımız karakter için javascript fonksiyonu çağırılmaktadır. İlk koddaki 60 ve ikinci koddaki 500 maksimum karakter sayısın göstermektedir. Eğer bu sayı aşılırsa yukarıdaki javascript kodunda bulunan hata mesajı ekrana gelecektir "En fazla 60 karakter kullanınız.".

Sırada aldığımız bilgileri sayfada gösterecek olan ve sayma işleminin gerçekleşeceği forma gelelim. Bu formda yine input şeklinde olacaktır fakat kullanıcıların üstündeki sayı ile oynamamaları için readonly="readonly" etiketini input içine yerleştirmemiz gerekmektedir.

<input name="remaining" type="text" value="60" readonly="readonly">

Kodu biraz inceleyecek olursak value="60" yazan yerdeki 60 bizim geri sayıma başlama noktamızı göstermektedir. Buradaki sayı ile yukarıdaki kodlarda belirlediğimiz sayıların senkron olmasına dikkat edelim. Yani maksimum 60 karakter belirlemişken 75 ten geriye doğru saymak mantıklı bir yaklaşım olmayacaktır.

Son kodda dikkat edilmesi gereken en önemli kısım farkındaysanız input ismi remaining dir. bu isim çok önemlidir yani siz kendi belirlediğiniz bir ismi de buna koyabilirsiniz fakat bunu yaptığınız zaman karaktersayma(this.form.form1,this.form.remaining,60); yazan yerdeki ismide aynı şekilde değiştirmelisiniz. Çünkü sonuç çıktısı bu isme ait olan inputa gönderilmektedir.

» Örnek bir yazılım yapacak olursak. Sahip olduğumuz input 70 ten geriye doğru saymaya başlasın ve maksimum karakter sayısı da 70 olsun. Yapmamız gereken.
1.) En üstte belirtilen ana javascript kodunu sayfaya yerleştirin. Yerleştirme işlemini html sayfadaki </head> etiketinin hemen üst satırına aşağıdaki gibi koyun.

<script type="text/javascript">
function karaktersayma(alan, say, maksimum) {
if (alan.value.length > maksimum) {
alan.value = alan.value.substring(0, maksimum);
alert("En fazla "+maksimum+" karakter kullanınız.");
} else {
say.value = maksimum - alan.value.length;
}}
</script>

2.) Sayma işleminin yapılacağı input içine aşağıdaki kodu yerleştirin.

onKeyDown="karaktersayma(this.form.form1,this.form.remaining,75);" onKeyUp="karaktersayma(this.form.form1,this.form.remaining,75);"

3.) Son olarak sayım işlemi sonucunu gösterileceği input kısmını uygun bir yere koyarak iç yapısını aşağıdaki gibi olacak şekilde ayarlayın veya hali hazırda tasarladığınız sonuç inputunun ismini 2. numaralı kısımda kullandığınız "this.form.remaining" ile aynı isimde olmasını sağlayın. Hepsi bu kadar işte çalışır haldeki scriptinizin görüntüsü aşağıda mevcuttur.

1: Form boşken
2: Formda bir yazı yazılıyken kaç karakterin kullanılabileceği sağ taraftaki sonuç kutucuğunda gösterilmektedir. Klavyeden girilen her harf ve yapılan harf silmeler karşı duyarlıdır. Yani girilen karakter veya harf silindiği zaman sayı tekrar artacaktır. Ayrıca girilen boşluklarda karakter olarak ele alınıp sayılmaktadır.