Ako pridať klávesové skratky na vaše webové stránky

Láska klávesové skratky? Môžu vám pomôcť ušetriť veľa času, nie? Chcete pridať klávesové skratky na svoju vlastnú webovú stránku v prospech vašich návštevníkov? Veľmi by to zlepšilo prístupnosť a navigáciu vašich stránok.

V tomto príspevku vám poskytnem rýchlu príručku, ako pridať skratky na vašu webovú stránku pomocou knižnice JavaScript s názvom Pasca na myši. Pomocou pasca na myši môžete označiť kľúče ako klávesy Shift, Ctrl, Alt, Options a Command to vykonávať určité funkcie na vašich webových stránkach. To tiež funguje dobre na starších prehliadačoch.

Viac informácií o Hongkiatu:

• Vytvára animovaný nápovedu pomocou funkcie Hint.Css
• Vytvorenie podrobného sprievodcu pomocou nástroja Intro.Js [Tutorial]
• Ako štýlový posúvač rozsahu rozsahu HTML5
• Ako používať lokálne uloženie súborov cookie a HTML5

Začíname

Začnite vytváraním nového dokumentu HTML spolu s obsahom a prepojením knižnice pasca. Budem používať knižnicu Mousetrap hosťovanú v CDNjs tak, aby knižnica bola poskytovaná prostredníctvom siete CloudFlare, ktorá by mala byť rýchlejšia ako náš vlastný server

Teraz budeme používať pasca na myši , Viažu ' metóda pripojenia klávesových skratiek s funkciou. Môžete priradiť jediný kľúč, kombinácia klávesov alebo sekvenčné klávesy, napríklad

Jednoduchý kľúč

V tomto príklade viazame s.

 Mousetrap.bind ('s', funkcia (e) // Vaša funkcia tu ...); 

Kombinovaný kľúč

V tomto príklade viazame klávesy Ctrl a s. Ak chcete vykonať určenú funkciu, budete musieť stlačiť dve tlačidlá.

 Mousetrap.bind ('ctrl + s', funkcia (e) // Vaša funkcia tu ...); 

Sekvenčný kľúč

V tomto príklade bude používateľ musieť stlačiť g a potom s dodatočne. Ak vyvíjate webovú hru, môže to byť užitočné pri pridávaní tajného skrytého kombinovaného kľúča.

 Mousetrap.bind ('g s', funkcia (e) // vaša funkcia tu ...); 

Použitie pasca na myši

Vytvoríme jednoduchú webovú stránku s niekoľkými klávesovými skratkami, ktoré umožnia používateľom prístup k niektorým funkciám na webových stránkach. Budeme používať jQuery na uľahčenie manipulácie s dokumentom HTML a výberom HTML prvkov.

Začnime s niečím ľahkým.

Budeme viazať kľúč, ktorý umožní používateľovi rýchlo sa sústrediť na vstupné pole vyhľadávania.

1. Nasledujúca značka HTML pre vyhľadávanie spolu s id.

2. Ďalej vytvoríme funkciu, ktorá sa zameria na vstup vyhľadávania.

 vyhľadávanie funkcií () var search = $ ('# search'); vyhľadávanie.val ("); search.focus (); 

3. Nakoniec viazame kľúč na spustenie funkcie.

 Mousetrap.bind ('/', vyhľadávanie); 

4. To je to. Teraz by ste mali byť schopní prejsť na vyhľadávací vstup stlačením tlačidla /.

Môžete tiež viazať kombináciu klávesov Ctrl / Cmd + F, čo je obľúbená klávesová skratka používaná pri vyhľadávaní v mnohých aplikáciách pre počítače:

 Mousetrap.bind (['príkaz + f', 'ctrl + f', vyhľadávanie); 

Použitie myši s bootstrapom

Je jednoduché integrovať pasca na myši s rámcom, napríklad Bootstrap. V tomto druhom príklade sa zobrazí okno s nápovedou, v ktorom sa zobrazí zoznam skratiek dostupných na webových stránkach. Tu som sa rozhodol pre Bootstrap Modal, aby predstavil zoznam a označil? kľúč na zobrazenie modálu.

Napriek tomu ? je prístupná iba pomocou klávesu Shift, ktoré viažu len? kľúč je dostatočný.

 Mousetrap.bind ('?', Funkcia () $ ('# help') modálna ('show');); 

Teraz, keď narazíte? , zobrazí sa popup.

Tip pre efektívne viazanie

V priebehu času môže vaša rastúca kolekcia klávesových skratiek začať narušovať váš kód. Ak k tomu dôjde, existuje rozšírenie, ktoré môžete pridať, aby sa vaše “kľúčové viazanie” kódy efektívnejšie. Nazýva sa to “väzbový slovník”. Pridajte toto rozšírenie po primárnej knižnici pasca myši, mousetrap.min.js.

Teraz, namiesto toho, aby sme oddelili každý viazaný kľúč, môžeme ich jednoducho zoskupiť do jedného .bind () metóda, ako je to takto:

 Mousetrap.bind ('/': vyhľadávanie, 't': tweet, '?': Funkcia modal () $ ('# help'). ) highLight ('j'), 'k': funkcia prev () highLight ('k')); 

Pre pokročilejšiu implementáciu môžete vidieť demo, ktoré som vykonal. V demo môžete stlačením tlačidla J alebo K zvýrazniť príspevok a stlačením klávesu T môžete vytlačiť aktuálny príspevok, ktorý ste zvýraznili.

• Zobraziť demo
• Stiahnuť ▼