Så här lägger du till tangentbordsgenvägar till din webbplats

Älskar tangentbordsgenvägar? De kan hjälpa dig att spara mycket tid, eller hur? Vill du lägga till tangentbordsgenvägar till din egen webbplats till förmån för dina besökare? Det skulle förbättra webbplatsens tillgänglighet och navigering avsevärt.

I det här inlägget kommer jag att ge en snabbguide om hur du lägger till genvägar till din webbsida med ett JavaScript-bibliotek som heter Mousetrap. Med Mousetrap kan du ange nycklar som Shift, Ctrl, Alt, Options och Command till utför särskilda funktioner på din webbplats. Det fungerar också bra över äldre webbläsare.

Mer om Hongkiat:

• Skapa animerade verktygstips enkelt med Hint.Css
• Bygga en steg-för-steg guide med Intro.Js [Handledning]
• Så här stilar du HTML5-räckvidden
• Så här använder du cookie och HTML5 localstorage

Komma igång

Börja med att skapa ett nytt HTML-dokument tillsammans med innehållet och länka Mousetrap-biblioteket. Jag kommer att använda Mousetrap-biblioteket värd i CDNjs så att biblioteket kommer att serveras via CloudFlare-nätverket, vilket borde vara snabbare än vår egen server

Nu ska vi använda Mousetrap 'binda' Metod för att fästa tangentbordstangenterna med funktionen. Du får tilldela en enda nyckel, en tangentkombination eller sekvensnycklar, till exempel

Enda nyckel

I det här exemplet binder vi s.

 Mousetrap.bind ('s', funktion (e) // din funktion här ...); 

Kombinationsnyckel

I det här exemplet binder vi Ctrl och s. Du måste trycka på de två tangenterna för att utföra den angivna funktionen.

 Mousetrap.bind ('ctrl + s', funktion (e) // din funktion här ...); 

Sekvensnyckel

I det här exemplet måste användaren trycka på g och sedan s senare. Om du utvecklar webbaserat spel kan det här vara användbart för att lägga till en hemlig dold nyckelkombination.

 Mousetrap.bind ('g s', funktion (e) // din funktion här ...); 

Använda Mousetrap

Vi kommer att bygga en enkel webbsida med ett par tangentbordsgenvägar som gör det möjligt för användarna att få tillgång till viss funktionalitet på webbplatsen. Vi använder jQuery för att göra det enklare att manipulera HTML-dokumentet och välja HTML-element.

Låt oss börja med något enkelt.

Vi kommer att binda en nyckel som gör att användaren snabbt kan fokusera på sökfältet.

1. Följande är HTML-markup för sökningen tillsammans med id.

2. Nästa skapar vi en funktion som kommer att fokusera på sökinmatningen.

 funktionssökning () var search = $ ('# search'); search.val ("); search.focus (); 

3. Slutligen binder vi en nyckel för att köra funktionen.

 Mousetrap.bind ('/', sök); 

4. Det är det. Du ska nu kunna navigera till sökinmatningen genom att trycka på / -knappen.

Alternativt kan du också binda tangentkombinationen, Ctrl / Cmd + F, som är en populär nyckelgenväg som används för sökning i många stationära appar:

 Mousetrap.bind (['command + f', 'ctrl + f'], sök); 

Använda Mousetrap med Bootstrap

Det är lätt att integrera Mousetrap med ett ramverk, till exempel Bootstrap. I det här andra exemplet visar vi ett hjälpfönster som visar en lista över genvägar som finns på webbplatsen. Här väljer jag Bootstrap Modal att presentera listan och beteckna? nyckeln för att visa modal.

Även om ? är endast tillgänglig med Shift-tangenten, bara bindande? nyckeln är tillräcklig.

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

Nu när du slår på? tangent kommer en popup att visas.

Tips för effektiv bindning

Med tiden kan din växande samling av tangentbordsgenvägar börja förstöra din kod. Om det händer finns det en förlängning som du kan lägga till för att göra din “nyckelbindning” koder effektivare. Det heter den “binda ordboken”. Lägg till den här tillägget efter det primära Mousetrap-biblioteket, mousetrap.min.js.

Nu kan vi, i stället för att skilja varje nyckelbindning, noggrant gruppera dem i en enda .binda() metod, som så:

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

För mer avancerat genomförande kan du se den demo som jag har gjort. I demo kan du trycka på J eller K för att markera inlägget och trycka på T för att tweet det aktuella inlägget som du markerade.

• Visa demo
• Ladda ner