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>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.
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>
<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.
<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>
<script>Keycode : Klavyeden basılan bir tuşun unicode değerini bulmamızı sağlar.
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>
Böylelikle makalemizinde sonuna gelmiÅŸ bulunmaktayız. Anlamadığınız noktaları yorum yoluyla sorabilirsiniz. Yararlı olması dileÄŸiyle...
2 Yorum
Zeki Delice
Aradığım ÅŸey tamda buydu. TeÅŸekkürler aerdogan.com
Özcan
Merhaba, Türkçe karakterlere izin verip (.,-) gibi karakterleri nasıl yasaklayabiliriz?