Jak přidat klávesové zkratky na vaše webové stránky

Láska klávesové zkratky? Mohou vám pomoci ušetřit spoustu času, ne? Chcete ke svým webovým stránkám přidávat klávesové zkratky ve prospěch svých návštěvníků? To by výrazně zlepšilo dostupnost a navigaci vašich stránek.

V tomto příspěvku uvedu rychlý návod, jak přidat zástupce na webovou stránku pomocí knihovny JavaScript nazvané Past na myši. S Pastou na myši můžete označit klíče jako Shift, Ctrl, Alt, Možnosti a Příkaz k provádět určité funkce na svých webových stránkách. Funguje to i ve starších prohlížečích.

Více o Hongkiatu:

• Vytváření animovaných tipů snadno pomocí nástroje Hint.Css
• Vytváření průvodce krok za krokem pomocí Intro.Js [Výukový program]
• Jak styl HTML5 rozsah jezdce
• Jak používat cookie a HTML5 localstorage

Začínáme

Začněte vytvořením nového dokumentu HTML spolu s obsahem a propojením knihovny Mousetrap. Budu používat knihovnu Mousetrap hostovanou v CDNjs, aby byla knihovna obsluhována prostřednictvím sítě CloudFlare, která by měla být rychlejší než náš vlastní server

Nyní použijeme Past na myši 'svázat' způsob připojení kláves klávesnice s funkcí. Můžete přiřadit jeden klíč, kombinace kláves nebo sekvenční klíče, například

Jeden klíč

V tomto příkladu svázáme s.

 Mousetrap.bind ('s', funkce (e) // vaše funkce zde…); 

Kombinovaný klíč

V tomto příkladu svázáme Ctrl a s. K provedení určené funkce budete muset stisknout dva klíče.

 Mousetrap.bind ('ctrl + s', funkce (e) // vaše funkce zde…); 

Sekvenční klíč

V tomto příkladu bude uživatel muset stisknout g a pak s následně. Pokud vyvíjíte webovou hru, může to být užitečné pro přidání tajného skrytého klíče combo.

 Mousetrap.bind ('g s', funkce (e) // vaše funkce zde…); 

Použití past na myši

Vybudujeme jednoduchou webovou stránku s několika klávesovými zkratkami, které uživatelům umožní přístup k některým funkcím na webových stránkách. Budeme používat jQuery, abychom usnadnili manipulaci s HTML dokumentem a vybrali HTML elementy.

Začněme něčím snadným.

Budeme vázat klíč, který umožní uživateli rychle se zaměřit na vyhledávací pole.

1. Následující je HTML značení pro vyhledávání spolu s id.

2. Dále vytvoříme funkci, která se zaměří na vstup vyhledávání.

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

3. Nakonec svázáme klíč ke spuštění funkce.

 Mousetrap.bind ('/', vyhledávání); 

4. To je vše. Nyní byste měli mít možnost procházet vstupem vyhledávání stisknutím tlačítka /.

Alternativně můžete také vázat kombinaci kláves Ctrl / Cmd + F, což je populární klávesová zkratka používaná pro vyhledávání v mnoha aplikacích pro stolní počítače:

 Mousetrap.bind (['příkaz + f', 'ctrl + f'], hledání); 

Používání past na myši s Bootstrapem

Je snadné integrovat Mousetrap s rámcem, například Bootstrap. V tomto druhém příkladu ukážeme okno nápovědy, které zobrazí seznam zástupců dostupných na webových stránkách. Zde jsem se rozhodl pro Bootstrap Modal představit seznam a určit? pro zobrazení modálního.

Ačkoliv ? je přístupná pouze klávesou Shift, která je závazná pouze? klíč je dostačující.

 Mousetrap.bind ('?', Function () $ ('# help'). Modal ('show');); 

Teď, když narazíš? zobrazí se vyskakovací okno.

Tip Pro efektivní vazbu

Postupem času může vaše rostoucí sbírka klávesových zkratek začít kódovat. Pokud k tomu dojde, existuje rozšíření, které můžete přidat “klávesová vazba” efektivnější. Je pojmenován “vázat slovník”. Přidat toto rozšíření po primární knihovně Mousetrap, mousetrap.min.js.

Namísto oddělení každé vazby klíčů je můžeme přehledně seskupit do jednoho .svázat() metoda:

 Mousetrap.bind ('/': search, 't': tweet, '?': Function modal () $ ('# help'). Modal ('show');, 'j': function next ( ) highLight ('j'), 'k': function prev () highLight ('k')); 

Pro pokročilejší implementaci můžete vidět demo, které jsem vytvořil. V ukázce můžete stisknutím klávesy J nebo K zvýraznit příspěvek a stisknutím tlačítka T tweetnout aktuální příspěvek, který jste zvýraznili..

• Zobrazit ukázku
• Stažení