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?