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;

}