Javascript ile Klavye Tuşları

 bcakir
 20 Kasım 2011

Merhaba arkadaşlar, bu yazımda sizlere javascript ile klavye tuşlarını yönetmeyi ve işlemeyi anlatacağım. Bu yazıyla birlikte basılan tuşu almayı, engellemeyi ve bu tuşlarla işlem yapmayı öğrenmiş olacaksınız. Bu işlemlerle ilgili 2 farklı örnek yapacağım. İlk uygulamayı JQuery ile yapacağım. Diğerini ise shortcuts kütüphanesi ile geliştireceğim. İlk uygulamamızda klavyeden basılan tuşların kodlarını ekranda gösterme işlemi, ikincisinde ise basılan tuşların ne olduğunu ekranda göstermeyi yapacağız. Uygulamanın çalışması için shortcuts kütüphanesine ihtiyaç duyacağınızdan dolayı, uygulamaların bitmiş halini sizlerle paylaşacağım. Uygulamalarımızın içeriği bu şekilde olacak, şimdi sırasıyla yapmaya başlayalım.

<!DOCTYPE html>
<head>
<title>Javascript ile Klavye Tuşları</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
//bir tuşa basılınca fonksiyonu çalıştır
document.onkeydown = keyKontrol;

//ekrana basılan tuşun kodunu verir
function keyKontrol(key){
    var keyKod;
    keyKod = key.which;
	if(keyKod == 13){
		alert('Enter tuşuna bastınız.');
	}else{
		alert(keyKod);   
	}
}                
</script>
</head>
<body>
</body>
</html>

İlk uygulamamızı yukarıda geliştirdik. Enter tuşuna basılınca ekrana bu tuşa bastığınızı, diğer tuşlarda ise tuşun numarasını sizlere veriyor. Klavye tuş kodlarını bu uygulama ile öğrenerek o tuşlara yönelik kolayca bir işlem yapabilirsiniz. İlk uygulamamızı tamamladığımıza göre ikincisini yapalım.

<!DOCTYPE html>
<head>
<title>Javascript ile Klavye İşlemleri</title>
<script type="text/javascript" src="shortcuts.js"></script>
<script type="text/javascript">
//x tuşuna basıldıysa çalıştır
shortcut("A", function(){
    alert('A tuşuna bastınız.');
});

//Ctrl+A tuşuna basıldıysa çalıştır
shortcut("ctrl+z", function(){
    alert('Ctrl+Z tuşlarına bastınız.');
});
</script>
</head>
<body>
</body>
</html>

Bu uygulamada ise istediğimiz herhangi bir tuşu yazıp. Ona basıldığını söyleyebiliriz ya da o tuş ile bir işlemi kolayca yapabiliriz. İsterseniz bu yöntemle herhangi bir tuşu yasaklayabilirsiniz de, kullanım amacı size kalmış. Uygulamanın bütün içeriğinin olduğu dosyayı buradan indirebilirsiniz. Böylece bu uygulamamızda bitti, gelecek uygulamalarda görüşmek üzere.

 3.415 Okunma

Bu yazıya 7 yorum yapılmış.

  1. Bir çok amaç için kullanılabilir ama ben sağ tuşu kilitlemek için kullandım 😀

  2. Çok aradım ama bu konu hakkında fazla bilgi bulamamıştım paylaşım için teşekkürler.

  3. hocam tab tuşunu nasıl engelleyeceğim 2. kodda.

    • Kadir, Nuri.

      function f()
      {
      return false
      }

      document.onkeydown = f;

      Bu kod yeterli olacaktır tab dahil tüm tuşların iptali için.

  4. Bütün klavye tuşlarını nasıl kapatırım(kilitlerim) acaba?

    • function tabiptal()
      {
      if ( event.keyCode == 9 ) return false;
      }

      document.onkeydown = tabiptal;

      🙂

  5. Konuyla ilgili deteylı bilgiyi bu siteden alabilirsiniz. Uzun süredir takip ettiğim ve beğendiğim bir sitedir.
    http://www.sonercelix.com/MakaleDetay/24/Javascript-ile-enter-tusuna-basildigini-kontrol-etmek

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla JavaScript, JQuery
Kapat