Web sayfalarında TextBox kutusunun içine sadece sayıların girilmesini isteyebilirsiniz. Not girişi, okul numarası, TC kimlik numarası sadece sayılardan oluşmaktadır. Bu bilgilerin girişinde kullanıcının hata yapmaması için sayıların girilmesi işlemini yapmak isteyebilirsiniz. Diyelim ki, iki sayıyı toplayan bir uygulamaya yapacaksınız. Soru kökünden de anlaşılacağı gibi, iki tane sayının girmesini sağlamanız gerekir. Sayılar ise, 0 ile 9 arasındaki rakamlardan oluşmaktadır. Şimdi uygulamayı adım adım yapmaya çalışalım.
Visual Studio programını açınız.
Yeni bir web projesi oluşturunuz.
Projeye bir adet html uzantılı web sayfası ekleyiniz.
Web sayfasının body etiketi arasına aşağıdaki satırları ekleyiniz.
A Sayısı :
<input id="txtA" type="text" /><br />
B Sayısı :
<input id="txtB" type="text" /><br />
<input id="btnTopla" type="button" value="Topla" /><br />
<span id="txtC"></span>
Şimdi de projemize kodlar.js isimli dosyayı ekleyiniz. Bu dosya yardımıyla txtA ve txtB kutularının içine sadece sayı girilmesini sağlayacağız.
Eklenen dosyanın içinde kontrol isminde bir fonksiyon tanımlayınız.
function kontrol() {
}
Fonksiyonun içinde klavyedeki tuşların kodlarını saklamak için tuslar isminde bir değişken tanımlayalım.
var tuslar;
Bu arada klavyeden bir tuşa basma işlemi bir olay olduğu için bu olayın kontrol fonksiyonuna parametre olarak verilmesi gerekir. Fonksiyonumuzu yeniden düzenleyelim.
function kontrol(e) {
}
Şimdi de basılan tuşun tuş kodunu almak için aşağıdaki satırları ekleyelim.
function kontrol(e) {
var tuslar;
tuslar = e.keyCode;
}
Peki, 0 ile 9 arasındaki rakamların tuş kodu nedir. Bunları bilmemiz gerekir. 0 için 48, 9 için 57 değeri kod olarak verilmiştir. buna göre kontrolleri yapalım.
function kontrol(e) {
var tuslar;
tuslar = e.keyCode;
if (tuslar > 47 && tuslar < 58) {
return true;
} else {
return false;
}
}
Fonksiyonu tanımlama işlemini yaptık. Bunu web sayfamızda nasıl kullanacağız. Aşağıdaki satırı web sayfasında head etiketi arasına yerleştiriniz.
<script src="kontrol.js" type="text/javascript"></script>
Tanımladığımız fonksiyonu txtA ve txtB kutularında nasıl kullanacağız. Klavyeden bir tuşa basılması olayları arasında onkeypress, onkeydown, onkeyup bulunmaktadır. Biz burada onkeypress olayını kullanacağız. Buna göre etiketlerin tanımlanmış son hali aşağıdaki gibi olacaktır.
A Sayısı :
<input id="txtA" type="text" onkeypress="return kontrol(event);"/><br />
B Sayısı :
<input id="txtB" type="text" onkeypress="return kontrol(event);"/><br />
<input id="btnTopla" type="button" value="Topla" /><br />
<span id="txtC"></span>
Web sayfasını çalıştırdığınızda, ilgili kutuların içine sadece sayıların yazıldığını görürsünüz.
Konu ile ilgili sorularınız varsa, yorumlar kısmını, mesaj defterini kullanabilirsiniz. Makaleyi paylaşmayı ve tavsiye etmeyi unutmayınız.