Merhaba arkadaşlar. Bu makalede sizlere form elemanlarına (text, textarea, password vb.) girilen değerlerin anlık olarak karakter sayısını göstermeyi anlatacağım. İlk olarak html kodlarımız ile başlayacağım. Sonrasında javascript kodlarımızı yazacağım.

<input type="text" class="yazialani">

<span class="yazdir">0</span>

Şimdi javascript kodlarımıza geçelim.

$(document).ready(function() {

$('.yazialani').bind('keydown keyup keypress change',function(){

	var karaktersayisi = $('.yazialani').val().length;

	$('.yazdir').html(karaktersayisi);

});

});

Jquery kütüphanemizi sayfamıza dahil ediyoruz.

<script type="text/javascript"

src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8">

</script>

Bind herhangi bir nesneye event veya kendi oluşturduğumuz olayları atamak için kullanılır. Yukarıda javascript kodlarımız ile ilgili eventlerimizi yazdık. Yazialani isimli form elemanımızın içerisindeki değeri aldık(val) ve length ile karakter sayısına ulaşıp karaktersayisi adlı değişkenimize aktardık. Bu değişkenimizi de yazdir isimli spanımıza atadık-yazdırdık. Aşağıda css kodlarıda mevcut. Tasarımını yukarıda bulunan görseldeki gibi yapmak istiyorsanız bu kodları kullanabilirsiniz. Bir sonraki makalede görüşmek dileğiyle...

.yazialani {

border:solid;

border-color:#E9772E;

border-width:1px;

font-family:Tahoma;

width:300px;

padding:10px;

}

.yazialani:focus

{

border-color:#333333;

}

.yazdir {

font-family:Tahoma;

font-size:13px;

color:#333333;

}