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">Åžimdi javascript kodlarımıza geçelim.
<span class="yazdir">0</span>
$(document).ready(function() {Jquery kütüphanemizi sayfamıza dahil ediyoruz.
$('.yazialani').bind('keydown keyup keypress change',function(){
var karaktersayisi = $('.yazialani').val().length;
$('.yazdir').html(karaktersayisi);
});
});
<script type="text/javascript"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...
src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8">
</script>
.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;
}
1 Yorum
selahattin
kolay gelin. ben bir program yapmaya niyetlendim. veritabanına kelime ve anlamı yükleyeceÄŸim. sayfamda metin alanı olacak ve o alana biÅŸeyler yazıldığında kelimeler veritabanı ile karşılaÅŸtırlacak ve eÄŸer orada var ise alt tarafa yazılacak. bu k