Arşiv sayfasından bütün yazılarıma ulaşabilirsiniz

JavaScript İle Klavye Tuşlarını İşlemek

klavyeBazen ziyaretçinin klavyeden hangi tuşa veya hangi tuşlara bastığını öğrenmek isteriz. JavaScript ile kod yazarak klavyeden hangi tuşa basıldığını öğrenebilirsiniz. Sıfırdan kod yazmak yerine hazır yazılmış kodları da kullanabilirsiniz. Ben bu iş için sıfırdan kod yazmak istemedim ve OpenJS sitesinde gördüğüm bir JavaScript dosyasından faydalandım. Bu dosya o kadar güzel hazırlanmış ki sizinle de paylaşmak istedim ;)

İlk önce gerekli olan JavaScript dosyasını buradan 'Hedefi Farklı Kaydet' diyerek indirin. İndirdiğiniz JavaScript dosyasını web sayfanıza bağlamak için <head></head> etiketleri arasına alttaki kodu yerleştirin.

JAVASCRIPT:
  1. <script type="text/javascript" src="shortcuts.js"></script>

JavaScript dosyasını ekledikten sonra örnekler yaparak nasıl klavye tuşlarını işleyebileceğimize bakalım.

Tek bir tuşa basıldığında

Örnek uygulamamızda klavyeden X tuşuna basıldığında X tuşuna bastınız ! mesajı verdirelim.

JAVASCRIPT:
  1. <script type="text/javascript">
  2.     shortcut("X", function() {
  3.                 alert("X tuşuna bastınız !");
  4.     });
  5. </script>

Birden fazla tuşa basıldığında

Şimdi ise klavyeden Ctrl ile birlikte 5 tuşlarına basıldığında Ctrl ve 5 tuşlarına bastınız ! mesajı verdirelim.

JAVASCRIPT:
  1. <script type="text/javascript">
  2.     shortcut("Ctrl+5", function() {
  3.                 alert("Ctrl ve 5 tuşlarına bastınız !");
  4.     });
  5. </script>

Gördüğünüz gibi kullanım aynı. Sadece iki tuş arasına + işareti eklemeniz yeterli ;)

Hazırladığım örnek bir sayfaya buradan, konuyla ilgili daha fazla ayrıntıya ise şuradan ulaşabilirsiniz.

EkleBunu Sosyal Paylaşım Butonu

10 yorum var

  1. gerçekten çok güzel bir kod teşekkürler :)

  2. Önemli değil ;)

  3. ne gibi yerlerde kullanabiliriz bunu ?

  4. bu kod kullanıcıyı şüphelendirmekten ve sıkmaktan başka işe yaramaz

  5. Mesela kullanıcı belli bir tuşa bastığında bir olayı tetiklemek için kullanabilirsin.

    Örneğin bir yorum formunda mesaj yazıyorsun. Ctrl ve K tuşlarına basıldığında seçili kelimeyi koyu yaptırabilirsin. Ctrl ve U tuşlarına basıldığında seçili kelimenin altını çizdirebilirsin. Ctrl, Alt ve G tuşlarına basıldığında de mesajı göndertebilirsin.

    Yanlış bilmiyorsam MyNet’in e-mail ekranında da klavye kısayolları kullanabiliyordun. Örneğin okumakta olduğun bir mesajı klavyeden Shift ve i tuşlarına basıldığında “istenmeyenler” klasörüne gönderebiliyordun.

    Umarım anlatabilmişimdir ;)

  6. Sizin dediğiniz kalınlaştırma altını çizme olayını nasıl yapacağız sanırım alert yerine başka bir şey yazmak gerekiyor biraz daha detaylı anlatabilir misiniz mümkünse ?

  7. Güzel bir fonksiyon hazırlamış kim hazırladıysa. Saolsun tek tek tanımlamış ve çok rahat kullanabilme imkanı sunmuş :)

    Paylaşım için teşekkürler Erhan ;)

  8. @Deniz
    alert sadece bir örnekti. Oraya sen herhangi bir kod yerleştirebilirsin. O sana kalmış artık

    @shapcy
    Birşey değil dostum ;)

  9. çok teşekkürler erhan. güzel bir uygulama hazırlamışsın. yapacağım bazı uygulamalarda kullanabilirim. iyi çalışmalar

  10. Adaş, tek kelimeyle mükemmel bir uygulama. Yazılmış olan bir bbcode betiğine entegre edilirse mükemmel olur ki ilerde mutlaka bunu kullanırım ben :) Eline sağlık ;)

İçinizde kalmasın, siz de yorum yazın.