Jquery ile Karakter Sayısını Gösterme
Javascript

Jquery ile Karakter Sayısını Gösterme

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;
}


author

Aykut ErdoÄŸan

jquery, bind, length, event

  • Bu Yazılara da Gözat:

    1 Yorum

    author

    Cevapla