Sådan tilføjes tastaturgenveje til dit websted

Elsker tastaturgenveje? De kan hjælpe dig med at spare meget tid, ikke? Vil du gerne tilføje tastaturgenveje til din egen hjemmeside til gavn for dine besøgende? Det ville forbedre dit websteds tilgængelighed og navigation meget.

I dette indlæg vil jeg give en hurtig vejledning om, hvordan du tilføjer genveje til din webside ved hjælp af et JavaScript-bibliotek kaldet Mousetrap. Med Mousetrap kan du udpege nøgler som Shift, Ctrl, Alt, Options og Command til udføre særlige funktioner på dit websted. Det fungerer også godt på tværs af ældre browsere.

Mere om Hongkiat:

• Oprettelse af animerede værktøjstip nemt med Hint.Css
• Opbygge en trinvis vejledning ved hjælp af Intro.Js [Tutorial]
• Sådan stiler du HTML5-rækkevidde
• Sådan bruger du cookie og HTML5 lokalstorage

Kom i gang

Begynd med at oprette et nyt HTML-dokument sammen med indholdet og knytte Mousetrap-biblioteket. Jeg vil bruge Mousetrap bibliotek hostet i CDNjs, så biblioteket vil blive serveret via CloudFlare netværk, som skal være hurtigere end vores egen server

Nu bruger vi Mousetrap 'binde' metode til at vedhæfte tastaturtaster med funktion. Du må tildele en enkelt nøgle, en nøglekombination eller sekvensnøgler, for eksempel

Enkeltnøgle

I dette eksempel binder vi s.

 Mousetrap.bind ('s', funktion (e) // din funktion her ...); 

Kombinationsnøgle

I dette eksempel binder vi Ctrl og s. Du skal trykke på de to keysltogether for at udføre den udpegede funktion.

 Mousetrap.bind ('ctrl + s', funktion (e) // din funktion her ...); 

Sekvensnøgle

I dette eksempel skal brugeren trykke på g og derefter s efterfølgende. Hvis du udvikler webbaseret spil, kan det være nyttigt at tilføje en hemmelig skjult nøglekombination.

 Mousetrap.bind ('g s', funktion (e) // din funktion her ...); 

Brug af musefælde

Vi vil opbygge en simpel webside med et par tastaturgenveje, der giver brugerne adgang til nogle funktioner på hjemmesiden. Vi bruger jQuery til at gøre det lettere at manipulere HTML-dokumentet og vælge HTML-elementer.

Lad os begynde med noget nemt.

Vi skal binde en nøgle, der gør det muligt for brugeren at fokusere hurtigt på søgeindtastningsfeltet.

1. Følgende er HTML-markup for søgningen sammen med id.

2. Dernæst opretter vi en funktion, der vil fokusere på søgeindtastningen.

 funktionssøgning () var search = $ ('# søgning'); search.val ("); search.focus (); 

3. Endelig binder vi en nøgle til at køre funktionen.

 Mousetrap.bind ('/', søgning); 

4. det er det Du skal nu kunne navigere til søgeindtastningen ved at trykke på knappen /.

Alternativt kan du også binde nøglekombinationen, Ctrl / Cmd + F, som er en populær nøglegenvej, der bruges til søgning i mange stationære apps:

 Mousetrap.bind (['kommando + f', 'ctrl + f'], søgning); 

Brug Mousetrap med Bootstrap

Det er let at integrere Mousetrap med en ramme, for eksempel Bootstrap. I dette andet eksempel viser vi et hjælpevindue, der viser en liste over genveje, der er tilgængelige på hjemmesiden. Her vælger jeg Bootstrap Modal til at præsentere listen og betegne? nøgle til at vise modal.

Selvom ? er kun tilgængelig med Shift-tasten, bare bindende? nøglen er tilstrækkelig.

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

Nu når du rammer? nøgle vil en pop op vises.

Tip til effektiv binding

Over tid kan din voksende samling af tastaturgenveje begynde at ødelægge din kode. Hvis dette sker, er der en udvidelse, du kan tilføje for at gøre din “nøglebinding” koder mere effektive. Det hedder den “bind ordbog”. Tilføj denne udvidelse efter det primære Mousetrap bibliotek, mousetrap.min.js.

Nu kan vi i stedet for at adskille hver nøglebinding gruppere dem i en enkelt .binde() metode, som sådan:

 Mousetrap.bind ('/': search, 't': tweet, '?': Funktion modal () $ ('# help'). Modal ('show');, 'j': funktion næste ) highLight ('j', 'k': funktion prev () highLight ('k')); 

For mere avanceret implementering kan du se den demo, jeg har lavet. I demoen kan du trykke på J eller K for at fremhæve posten, og tryk på T for at tweet det aktuelle indlæg, som du fremhævede.

• Se Demo
• Hent