Merhabalar,

Bazı durumlarda kullanıcının hangi tuşa bastığını tespit etmek ve ona göre işlem yapmak gerekebilir. Bu durumu jQuery ile nasıl çözebileceğimizi bu yazıda ele alacağız.

Tuşa basma olayını yakalamak için on('keypress') fonksiyonunu kullanırız. Basılan tuşun kodunu keyCode ile öğrenebilir ve koşul belirleyebiliriz.

Örnek olarak: Kullanıcı Enter tuşuna bastığında bir uyarı mesajı gösteren kod:

$(document).on('keypress', function(e) {
  if (e.keyCode === 13) {
    alert('Enter tuşuna basıldı!');
  }
});

Yukarıdaki kodu jQuery içeren bir sayfada çalıştırırsanız, kullanıcı Enter tuşuna bastığında belirttiğiniz mesaj uyarı olarak gösterilecektir.

Fonksiyon içinde istediğiniz tuş koduna karşılık gelen işlemleri tanımlayabilirsiniz.

Peki tuş kodlarını nereden öğrenebiliriz? Aşağıdaki bağlantıya giderek istediğiniz tuşa bastığınızda karşılık gelen keyCode değerini öğrenebilirsiniz:

https://keycode.info

Şimdi bir örneği HTML ile birlikte görelim. Örneğin: Bir e-posta inputu içine boşluk karakteri girilmesini engellemek istiyoruz.

Bu örnekte HTML içinden onkeypress niteliğini kullanarak tuş kontrolünü yapacağız:

<input type="text" onkeypress="return boslukEngelle(event)">

function boslukEngelle(e) {
  if (e.keyCode === 32) {
    return false;
  }
}

Yukarıdaki örnekte boşluk karakterinin (keyCode: 32) input içine girilmesi engellenmiş oluyor.

Canlı örnek için aşağıdaki CodePen bağlantısını ziyaret edebilirsiniz:

Boşluk Karakterini Engelleme – CodePen

Bu konu özellikle form doğrulama ve kullanıcı girişlerinde oldukça kullanışlıdır.

Umarım işinize yarar.

Mutlu Kodlamalar! :)