Bu yazımızda Jquery klavye olayları yani keypress, keydown, keyup olaylarını örnek uygulamalar üzerinden anlatacağım.
Olay dediğimiz kavram aslında hepimizin bildiği bir konu. Bir butonun tıklanması, fare ile bir nesnenin üzerine gelinmesi, bir formun doldurulup gönderilmesi, klavyeden bir tuşa basılması, açılır menüden seçim yapılması vb.. gibi aksiyonlar birer olaydır.
Örneklerimizde ilk önce olayın ne olduğundan bahsedip, ilgili örneğin kodlarını paylaşacağım. Yazının sonunda ise bu kodların uygulamasını paylaşacağım.
Uygulama üzerinde her bir olayı ayrı ayrı incelerseniz daha iyi anlaşılacaktır.
Önemli Yazacağınız Jquery kodlarını,
|
1 2 3 |
$(document).ready(function(){ // Kodlar buraya yazılacak }); |
içerisinde yazmaya çalışın. Neden bu şekilde yazmamız gerektiği ile ilgili bir yazım bulunuyor. Bunun için JQuery Document Ready Nedir? yazımı okuyabilirsiniz.
JQUERY KLAVYE OLAYLARI
1 – JQUERY KEYPRESS OLAYI
Keypress, klavyede herhangi bir tuşa basılması olayıdır. Örneğin id’si keypress olan input içerisine focus’lanıp klavyeden bir tuşa basıldığında alert ile istediğimiz bir mesajı verelim.
Html ve Jquery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 |
<input id="keypress" type="text" placeholder="keypress olayı"> <script> $(document).ready(function(){ $("#keypress").keypress(function() { alert("keypress olayı gerçekleşti.") }); }); </script> |
2 – JQUERY KEYDOWN OLAYI
Keydown, klavyede herhangi bir tuşa ilk basıldığı andır. Örneğin id’si keydown olan input içerisine focus’lanıp klavyeden bir tuşa basıldığında alert ile istediğimiz bir mesajı verelim.
Html ve Jquery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 |
<input id="keydown" type="text" placeholder="keydown olayı"> <script> $(document).ready(function(){ $("#keydown").keydown(function() { alert("keydown olayı gerçekleşti.") }); }); </script> |
3 – JQUERY KEYUP OLAYI
Keyup, keydown olayının tersine klavyede herhangi bir tuşa basıldıktan sonra elimizi kaldırdığımız andır.
Örneğin id’si keyup olan input içerisine focus’lanıp klavyeden bir tuşa uzunca basıldığında en son elimizi kaldırdığımız an için alert ile istediğimiz bir mesajı verelim.
Html ve Jquery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 |
<input id="keyup" type="text" placeholder="keyup olayı"> <script> $(document).ready(function(){ $("#keyup").keyup(function() { alert("keyup olayı gerçekleşti.") }); }); </script> |
Tüm Jquery klavye olaylarını tek uygulama üzerinde birleştirdim. Tek tek uygulayarak inceleyebilirsiniz.
Jquery klavye olayları hakkında daha fazla bilgi almak isterseniz JQuery sitesini ziyaret edebilirsiniz.
Şu yazılar da ilginizi çekebilir.
JQuery Scroll, Select, On, Off, One Olayları
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
