Javascript ile Sayı ve Harf Kontrolü
Javascript

Javascript ile Sayı ve Harf Kontrolü

Merhaba arkadaşlar. Bu makalemizde javascript ile sadece harf(+özel karakter) ve sadece sayı girilebilen form nesnesi oluşturacağız. Bunu yapmak için form nesnemizin onkeypress özelliğinden yararlanacağız. Göze hoş gözükmesi açısından css kodlara da yer verdim. Dilerseniz css kodları kullanmayabilir ya da daha farklı bir tasarım verebilirsiniz. Öncelikle css kodlarımız ile başlayalım.

<style>
body
{
font-family:Ubuntu;
padding:100px;
}
#textstyle
{
border:solid;
border-width:1px;
border-color:#cccccc;
font-family:Ubuntu;
font-size:13px;
padding:4px;
}
#textstyle:hover
{
border-color:#333333;
} </style>
Burada öncelikle tüm sayfamızdaki yazı tipini belirledik. Sonrasında padding ile sayfanın üstünden ve sol tarafından 100 pixel içeride olmasını belirttik. Sonrasında form elemanımızın kenarlık ayarlarını, yazı tipi ayarlarını ve kenar boşlukları oluşması için padding ayarını yaptık. Hover özelliği ile mause form elemanının üzerine gelince kenarlık rengini değiştirmesini sağladık. Şimdi html kodlarımıza geçelim.
<form>
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td>Sadece Sayı</td>
<td>
<input onkeypress="Sayi(event)" id="textstyle" type="text">
</td></tr>
<tr>
<td>Sadece Harf ve Özel Karakter</td>
<td>
<input onkeypress="Harf(event)" id="textstyle" type="text">
</td></tr>
</table></form>
Burada tablo yapımızı ve formumuzu oluşturup onkeypress özelliğine birazdan yazacağımız javascript fonksiyonlarını yazdık. Şimdi javascript kodlarımıza geçelim.
<script>
function Sayi(e) {
islem = document.all ? window.event : e;
karakter = document.all ? islem.keyCode : islem.which;
if(karakter<48||karakter>57) {
if(document.all) { islem.returnValue = false; } else { islem.preventDefault(); }
}
}

function Harf(e) {
islem = document.all ? window.event : e;
karakter = document.all ? islem.keyCode : islem.which;
if(karakter>=48&&karakter<=57) {
if(document.all) { islem.returnValue = false; } else { islem.preventDefault(); }
}
}
</script>
Keycode : Klavyeden basılan bir tuşun unicode değerini bulmamızı sağlar.
Böylelikle makalemizinde sonuna gelmiş bulunmaktayız. Anlamadığınız noktaları yorum yoluyla sorabilirsiniz. Yararlı olması dileğiyle...


author

Aykut Erdoğan

javascript, keyCode, event, unicode

  • Bu Yazılara da Gözat:

    2 Yorum

    author
    author

    Cevapla