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