Web Sitenize Klavye Kısayolları Nasıl Eklenir

Klavye kısayollarını seviyorum? Çok zaman kazanmanıza yardımcı olabilirler, değil mi? Ziyaretçilerinizin yararı için kendi web sitenize klavye kısayolları eklemek ister misiniz? Sitenizin erişilebilirliğini ve navigasyonunu büyük ölçüde geliştirirdi.

Bu yazıda, Mousetrap adlı bir JavaScript kütüphanesini kullanarak web sayfanıza kısayolların nasıl ekleneceği hakkında hızlı bir rehberlik edeceğim. Fare kapanı ile yapabilirsiniz anahtarları belirle ÜstKrkt, Ctrl, Alt, Seçenekler ve Komut web sitenizde belirli işlevleri yerine getirme. Ayrıca eski tarayıcılarda da iyi çalışır.

Hongkiat hakkında daha fazlası:

• Hint.Css ile kolayca animasyonlu araç ipucu oluşturma
• Intro.Js kullanarak adım adım kılavuz oluşturma [Eğitim]
• HTML5 aralık kaydırıcısını stilize etme
• Çerez ve HTML5 localstorage nasıl kullanılır

Başlamak

İçeriğin yanında yeni bir HTML belgesi oluşturarak ve Fare Kapanı kütüphanesini bağlayarak başlayın. CDNjs'de barındırılan Mousetrap kütüphanesini kullanacağım, böylece kütüphaneye kendi sunucumuzdan daha hızlı olması gereken CloudFlare ağı üzerinden sunulacak.

Şimdi fare kapanı kullanacağız 'Bağlamak' klavye tuşlarını işlevli ekleme yöntemi. Atayabilirsin tek bir tuş, bir tuş kombinasyonu veya sıra tuşları, Örneğin

Tek anahtar

Bu örnekte, s'yi bağlarız..

 Fare kapanı.bind ('s', işlev (e) // işleviniz burada…); 

Kombinasyon Anahtarı

Bu örnekte, Ctrl ve s'yi bağlarız. Belirtilen işlevi gerçekleştirmek için iki tuşa tamamen basmanız gerekir..

 Fare kapanı.bind ('ctrl + s', işlev (e) // işleviniz burada…); 

Sıra anahtarı

Bu örnekte, kullanıcının g tuşuna ve ardından tuşuna basması gerekir. s sonradan. Eğer web tabanlı bir oyun geliştiriyorsanız, bu gizli bir gizli şifreli şifreyi eklemek için yararlı olabilir..

 Fare kapanı.bind ('g s', işlev (e) // işleviniz burada…); 

Fare Kapanı Kullanımı

Kullanıcıların web sitesindeki bazı işlevlere erişmelerini sağlayan birkaç klavye kısayollu basit bir web sayfası oluşturacağız. HTML belgesini değiştirmeyi ve HTML öğelerini seçmeyi kolaylaştırmak için jQuery kullanacağız.

Kolay bir şeyle başlayalım.

Kullanıcının hızlı bir şekilde arama girişi alanına odaklanmasına olanak sağlayacak bir anahtarı bağlayacağız.

1. Aşağıdakiler, aramayla birlikte arama için HTML işaretlemesidir. İD.

2. Sonra, arama girişine odaklanacak bir fonksiyon yaratırız..

 function search () var search = $ ('# search'); search.val ("); search.focus (); 

3. Son olarak, işlevi çalıştırmak için bir anahtar bağlarız..

 Fare kapanı.bind ('/', arama); 

4. İşte bu. Şimdi / düğmesine basarak arama girişine gidebilmeniz gerekir..

Alternatif olarak, birçok masaüstü uygulamasında arama yapmak için kullanılan popüler bir kısayol olan Ctrl / Cmd + F tuş kombinasyonunu da bağlayabilirsiniz:

 Fare kapanı.bind (['komut + f', 'ctrl + f'], arama); 

Önyükleme İşleminde Fare Kapanı Kullanma

Fare kapanı, örneğin Bootstrap gibi bir çerçeveyle bütünleştirilebilir. Bu ikinci örnekte, web sitesinde mevcut olan kısayolların bir listesini görüntüleyen bir yardım penceresi göstereceğiz. Burada, Bootstrap Modal'ın listesini sunmasını ve? modal göstermek için anahtar.

Rağmen ? sadece Shift tuşuyla erişilebilir; anahtar yeterli.

 Fare kapanı.bind ('?', Function () $ ('# help'). Modal ('show');); 

Şimdi ne zaman vurdun? anahtar, bir açılır pencere görünecek.

Verimli Ciltleme İçin İpucu

Zaman içinde, artan klavye kısayolları koleksiyonunuz kodunuzu bozmaya başlayabilir. Bu durumda, telefonunuzu kullanmak için ekleyebileceğiniz bir uzantı vardır. “anahtar bağlama” kodları daha verimli. Adı “sözlük bağlamak”. Birincil fare kapanı kütüphanesinden sonra bu uzantıyı ekle, mousetrap.min.js.

Şimdi, her bir anahtar bağlamayı ayırmak yerine, bunları tek bir satırda özenle gruplayabiliriz. .bağlaması () yöntem, bunun gibi:

 Fare kapanı.bind ('/': arama, 't': tweet, '?': Function modal () $ ('# help'). Modal ('show');, 'j': next fonksiyonu ) highLight ('j'), 'k': işlevi prev () highLight ('k')); 

Daha gelişmiş uygulama için yaptığım gösterimi görebilirsiniz. Demoda, mesajı vurgulamak için J veya K tuşuna basabilir ve vurguladığınız geçerli mesajı tweetlemek için T tuşuna basabilirsiniz..

• Demoyu Gör
• İndir