mehmetduran.com - Paylaşmak Güzeldir...
Javascript ile Klavye Tuşlarının Kontrolü
Bu yazımda javascript ile klavye tuşlarını ve projelerimizde tuşlara nasıl hükmedebileceğimizi anlatmaya çalışacağım. Daha önce yaptığım birkaç uygulamada (özeliklle ajax kullanarak hazırladığım autocomplete uygulamasında) tuşların kullanımına ihtiyaç duymuştum. Ancak tam olarak hakim olamadığımdan bu eksikliği tamamlayamamıştım. Şimdi ise tuşları nasıl kontrol edebileceğimizi öğrenmiş ve uygulamalarımda rahatlıkla kullanabilir durumdayım. Basit olarak nasıl kontrol edeceğimize bakalım.

Öncelikle tuş işlemleri için keypress, keyup, keydown eventlarını kullanabiliriz. Ancak her event farklı tarayıcılarda birbirinden farklı çalışıyor. Mesela karakter tuşlarını kulladığımızda her tarayıcıda her event ile aynı sonucu alırken, yön tuşlarını kullandığımızda her tarayıcıda söylemiş olduğum eventların hepsi çalışmadı. Mesela Internet Explorer ile yön tuşları keypress eventı ile çalışmaz iken, keydown eventı ile çalışmaktadır. Böyle sorunlara dikkat etmeliyiz.

Daha sonra ise hangi tuşun kullanıldığını anlamak için o tuşun keyCode'larını bilmeliyiz. Buna göre basılan tuşun hangi tuş olduğunu anlayıp buna göre işlem yapacağız. Klavyede çok kullanılan tuşların keyCode karşılıklarını buradan görebilirsiniz.

Tüm bunları yaptıktan sonra kodlamamıza geçip, tuşları görevlendirebiliriz. Bunu daha iyi anlamak için aşağıdaki kodlamaları ve örneği inceleyebiliriz.

<script type="text/javascript">
  var x = 200, y = 200;
  $(document).keydown(function(event){
 
     //kullanılacak tuşların (yön tuşları) keyCode'ları
    var keys = new Array(37, 38, 39, 40);
 
    //tarayıcı farklılığından kaynaklanan keyCode'u elde ediyoruz
    var code = (event.which) ? event.which : event.keyCode;
 
    //kontrollerimizi yapıyoruz ve yapılacakları belirliyoruz.
    if(code == keys[0]){ x = x - 3; $("#kutu").css("left", x+"px");}
    if(code == keys[1]){ y = y - 3; $("#kutu").css("top", y+"px");}
    if(code == keys[2]){ x = x + 3; $("#kutu").css("left", x+"px");}
    if(code == keys[3]){ y = y + 3; $("#kutu").css("top", y+"px");}
  });
</script>

Örnekte sayfa yüklendikten sonra basılan tuşları kontrol ediyoruz. Eğer yön tuşlarından biri kullanılmış ise sayfada yer alan kontrolün pozisyonu ile oynayarak hareket sağlıyoruz. Anlaşılması için oldukça faydalı bir örnek olduğunu düşünüyorum. Buradan örneği görebilirsiniz.

Söylediğim gibi tuş kontrolünü, yapmış olduğum uygulamalardaki eksikliği gidermek ve kullanışlılığını artırmak için kullanacağım. Bunun dışında daha farklı uygulamalarda yapılabilir.

İyi Çalışmalar!
Mehmet Duran 05 Şubat Perşembe 2009 4 27957 4,1
Javascript Web Tasarım jQuery Klavye Tuşlar Jquery Site Araçları KeyCode
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Jquery Bütün Özellikler (E-Book) Sayfaların Oluşma Sürelerini Hesaplama (HttpModule Kullanarak) Jcrop ve Asp.net ile Resimleri Kesme (Örnek Dahil) Jquery, Ajax ve FaceBox ile Edit Update Uygulaması jQuery Ajax ile Arama Merkezi (Uygulamam)
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Hasan Gürsoy 05 Şubat Perşembe 2009 23:36 #1
Güzel olmuş, bununla küçük bir yılan oyunu geliyor aklıma..
Mehmet Duran 05 Şubat Perşembe 2009 23:40 #2
Haklısın örneği yaparken aklıma gelmedi ama daha sonra baktığımda basit bir oyunun yapılabileceğini farkettim. Ancak bu işler için zaman gerekli. Maalesef o da bende yok. ;)
Ramazan 02 Kasım Pazartesi 2009 07:48 #3
bunu resim galerisinde bir sondaki ID'e nasıl göndererek kullanabilirim?
Mehmet Duran 02 Kasım Pazartesi 2009 20:23 #4
Bunun için kullandığın ID'yi javascript ile kontrol etmelisin ve her tuşa basıldığında bu değeri artırmalısın. (değeri veya dizi ise index değerini artırmalısın.)
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Başarısızlıklarınız ile soylu bir şekilde yüzleşin, başarıdan farkı kalmayacaktır.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009