Merhabalar,
Bazı durumlarda kullanıcının hangi tuşa bastığını tespit etmek ve ona göre işlem yapmamız gerekebiliyor. Bunu Jquery kullanarak çözümlemeye çalışalım.
Öncelikle bilmemiz gereken tuşa basma olayını kavrayan ve işlem yapmamıza izin veren on fonksiyonu içindeki keypress olmaktadır. Klavyedeki tuş kodlarını barındıran keycode ile de hangi tuşa basıldığını öğrenip kontrol edebiliyoruz.
Söz dizimini kavramanız açısından örnek Enter tuşuna basıldığında alert (uyarı) basan bir kodu inceleyebiliriz.
$(document).on('keypress', function(e) {
if (e.keyCode === 13) {
alert('Enter tuşuna basıldı!');
}
});Bahsettiğim gibi bir tuşa basıldığında on(‘keypress’) sayesinde yakalayıp fonksiyona bir parametre gönderip (e) daha sonra hangi tuşa basıldığını o parametre üzerinden if içine sokup kontrol edebiliyoruz.
Yukarıdaki örnekte bulunan kodu Jquery barındıran bir siteye ekledikten sonra Enter tuşuna bastığınızda tırnak içinde belirtilen mesajı ekrana uyarı olarak verecektir. if süslü parantezleri içinde bulunan alana belirttiğiniz klavye koduna sahip tuşa basıldıktan sonra yaptırmak istediğiniz işlemi yazabilirsiniz.
Bu arada klavye tuşu kodlarını nereden bilebiliriz diye düşünüyorsanız bu linkteki adresi ziyaret edebilirsiniz. Kodunu merak ettiğiniz tuşa bastığınızda size keyCode değerini verecektir.
Bir örnekte HTML ile birlikte verelim. Örneğin içine e-mail adresi girilen bir input var. Bu input’ a boşluk karakterini girmeyi engelleyelim. Bu sefer kendimiz fonksiyon tanımlayalım. Tuşa basılma olayını HTML üzerinden onkeypress=” ” niteliği ile yakalayalım.
Tırnak içinde Jquery’de oluşturduğumuz fonksiyonunu döndürelim. Bu uygulamayı sizde inceleyip test edebilesiniz diye codepen üzerinden yaptım. Aşağıdan detaylı inceleme yapabilirsiniz. Input içinde boşluk karakteri kullanılamamaktadır.
See the Pen Boşluk Karakterini Engelleme by Furkan Giray (@furkangiray_com) on CodePen.
Basılan tuşu algılama konusunu açıklayıp örnekle detaylandırmaya çalıştım. Mutlaka işinize yarayacağını düşündüğüm bir konudur.
Mutlu kodlamalar 🙂
