<input type="text" id="test" />
$("#test").keypress();
test input una keypress fonksiyonumuzu atamış olduk. Bu atamadan sonra yapmak istediğimiz işlemleri keypress içinde bir function oluşturarak düzenliyoruz.$("#test").keypress(function(){
// yapmak istediklerimizi bu kısımda düzenliyoruz.
});
Dilerseniz küçük bir örnek yapalım. Sayfamızda “m” tuşuna basıldığında mesaj kutusu çıkartalım.$(document).keypress(function (event) {
var Karakter = String.fromCharCode(event.which);
// klavyeden basılan karakteri "Karakter" isminde bir değişkene aktarıyoruz.
// yakaladığımız değerin "m" olup olmadığını kontrol ediyoruz.
// eğer "m" ise mesej kutusu çıkartıyoruz.
if (Karakter == "m") {
alert();
}
});
Eğer bu ne işimize yarar derseniz, mesela örnekteki mantığı kullanarak sayfamızda kısa yollar yapabiliriz.Bu durumu daha iyi algılayabilmemiz için, bir input a yapılan girişleri kontrol edelim. Örnek olarak input a sadece rakamların girişine izin verelim.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jQuery - keypress()</title>
// Jquery kütüphanemizi çağırıyoruz.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#KeypressTest").keypress(function (event) {
Code = event.keyCode ? event.keyCode : event.charCode ? event.charCode : 0;
// klavyeden basılan tuşun keyCode değerini alarak "Code" değişkenine aktarıyoruz.
// rakamların (0, 1, 2, 3, 4, 5, 6, 7, 8, 9) keyCode değerleri 48 ile 57 arasındadır.
// bir sonraki adımda klavyeden gelen değerin 48 ile 57 arasında olup olmadığını kontrol ediyoruz.
if (Code >= 48 && Code <= 57) {
return true;
// eğer girilen değer 48 ile 57 arasındaysa basılan tuşa izin veriyoruz.
}
else {
return false;
// eğer girilen değer bu aralıkta değilse basılan tuşa izin vermiyoruz.
}
});
});
</script>
</head>
<body>
<input type="text" id="KeypressTest" />
</body>
</html>
Örnek :1. Örnek - Rakam Kontrolü
Lütfen bir değer girin
Bu bölüme sadece rakam girişine izin verilmektedir.
2. Örnek - Kısa yol tuşu oluşturma.
Ayrıca aynı konu ile ilgili diğer örneğimizide test edebilirsiniz. Bunun için lütfen "m" tuşuna basınız.
Hiç yorum yok:
Yorum Gönder