Javascript Klavye Kontrol - Tuş Fonksiyonları

Çoğumuz facebook ve twitter gibi sosyal ağ sitelerinde ( sadece örnek için ) görmüşüzdür.F ile kısayol olarak favorilere ekleriz L ile kısayol olarak beğeniriz gibi gibi web sitesinde klavye tuşları kısayol oluşturabiliriz.Ben sizlere nasıl yapılacağını anlatacağım..

Örneğimiz nasıl olacak biraz ondan bahsedeyim..İlk olarak bir kutu oluşturarak bunu sayfada bir yere sabitliyeceğiz sonra bu kutuyu klavyenin yön tuşları sayesinde sayfada ilerleteceğiz..

1-) KUTUMUZU HAZIRLAYALIM



#kutu{

            width: 300px; /* 300px Genişliğinde */

            height: 150px; /* 150px Yüksekliğinde */

            background:#E74C3C; /* Arkaplan Rengi */

            position: absolute; /* Pozisyonu */

            top: 200px; /* yukardan 200px */

            left: 200px; /* soldan 200px */

            border: 2px solid #CC6055; /* kenarlık çizgisi */

 

        }

2-) JQUERY KUTUPHANESİNİ SAYFAYA DAHİL EDEREK DEĞİŞKENLERİMİZİ TANIYALIM..



<script></script>

 

// JQUERY KOMUT SATIRLARINI AÇARAK İÇERİSİNDE GEREKLİ DEĞİŞKENLERİ TANIMLIYORUZ..

$(function(){

        // Başlangıç pozisyonumuzu ayarlıyoruz.. x= left y=top olarak varsayıyoruz..

         var x = 200, y = 200;

         // Basıldığında aktif olmasını istediğimiz tuşların ascii değerlerini belirliyoruz..

         var tus = new Array(37,38,39,40,77);

//rastgele renk arrayimizi oluşturuyoruz..

                 var renkler = 

                 [    '#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', 

                     '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',

                     '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', 

                     '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',

                     '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC', 

                     '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',

                     '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680', 

                     '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',

                     '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3', 

                     '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'

                  ];

3-) KLAVYE KONTROLUMUZU SAĞLAYALIM EĞER KLAVYEDE BİR TUŞA BASILIRSA ÇALIŞTIRMAK İSTEDİĞİMİZ FONKSİYONU BELİRTELİM..
document.keyKontrol;

4-) KEYKONTROL ADLI FONKSİYONUMUZUN İÇERİSİNİ YAZALIM..





function keyKontrol(key){

            var keyKod;

            // HANGİ TUŞLARA BASILDIGINI AŞAĞIDAKİ KOD YARDIMIYLA ANLIYORUYZ..

     var keyKod = (event.which) ? event.which : event.keyCode;

     // İF İLE HANGİ TUŞA BASILIRSA O BÖLÜMÜN ÇALIŞMASINI SAĞLIYORUZ..

     if(keyKod == tus[0]){ x = x - 3; $("#kutu").css("left", x+"px");}

        if(keyKod == tus[1]){ y = y - 3; $("#kutu").css("top", y+"px");}

        if(keyKod == tus[2]){ x = x + 3; $("#kutu").css("left", x+"px");}

        if(keyKod == tus[3]){ y = y + 3; $("#kutu").css("top", y+"px");}

        if(keyKod == tus[4]){ 

            // RENK ÜRETMEMİZ İÇİN RANDOM KOMUTUNU KULLANIYORUZ..

         var renkuret = Math.floor((Math.random()*50)+1);

        $("#kutu").css("background", renkler[renkuret]);}

                    // if içerisinde renk getiriyoruz..

    }

Şimdi dilerseniz neler yaptığımızı bir özetleyelim ,
Öncelikle kutu adında bir id oluşturarak buna css ile şekil verdik sonra varsayılan pozisyon değerlerimizi , basıldığında işlem yapılması istenilen tuşların ascii değerleri ve en son olarak renkler adında 50 adet renk içeren bir array oluşturduk..
Sonra kullanıcının klavyesinde bir tuşa basıldığında keyKontrol adlı fonksiyonun çalışması gerektiğini belirttik sonra bu keyKontrol adlı fonksiyonumuzun içerisinde gelen değerlere göre işlemimizi yaptırdık.Yön tuşlarına basılırsa tablo tuşun yönüne göre hareket edecek , M tuşuna basılırsa tablonun arkaplan rengi değişecektir.

Yaptığımız Örneği Görmek İçin Tıklayın..

Örneği İndirmek için Tıklayın..

Kaynak: http://mascoder.com/javascript-ile-klavye-kontrolu/

Javascript Klavye Kontrol - Tuş Fonksiyonları

Üye Girişi Yap