Cum să adăugați comenzi rapide de la tastatură la site-ul dvs. Web

Dragi comenzi rapide de la tastatură? Ele vă pot ajuta să economisiți o mulțime de timp, nu? Doriți să adăugați comenzi rapide de la tastatură pe site-ul dvs. propriu, în beneficiul vizitatorilor dvs.? S-ar îmbunătăți considerabil accesibilitatea și navigarea site-ului dvs..

În acest post, voi da un ghid rapid cu privire la modul de adăugare a comenzilor rapide la pagina dvs. web utilizând o bibliotecă JavaScript numită Mousetrap. Cu Mousetrap poți desemna cheile cum ar fi Shift, Ctrl, Alt, Opțiuni și Comandă la efectuați anumite funcții pe site-ul dvs. web. De asemenea, funcționează bine în browserele mai vechi.

Mai multe despre Hongkiat:

• Crearea cu ușurință a instrumentului animat cu Hint.Css
• Construirea unui ghid pas cu pas folosind Intro.Js [Tutorial]
• Modul de glisare a glisorului în gama HTML5
• Cum se utilizează cookie-ul și stocarea locală HTML5

Noțiuni de bază

Începeți prin a crea un nou document HTML împreună cu conținutul și conectați biblioteca Mousetrap. Voi folosi biblioteca Mousetrap găzduită în CDNjs, astfel încât biblioteca să fie difuzată prin rețeaua CloudFlare, care ar trebui să fie mai rapidă decât serverul propriu

Acum vom folosi Mousetrap 'lega' pentru a atașa cheile de tastatură cu funcție. Puteți aloca o singură tastă, o combinație de taste sau chei de secvență, de exemplu

Cheia unică

În acest exemplu, legăm s.

 Mousetrap.bind ('s', funcția (e) // funcția dvs. aici ...); 

Cheia combinată

În acest exemplu, legăm Ctrl și s. Va trebui să apăsați pe cei doi cautăți pentru a îndeplini funcția desemnată.

 Mousetrap.bind ('ctrl + s', funcția (e) // funcția dvs. aici ...); 

Secventa cheie

În acest exemplu, utilizatorul va trebui să apese pe g și apoi pe s ulterior. Dacă dezvoltați joc bazat pe web, acest lucru ar putea fi util pentru adăugarea unui combo secret secret.

 Mousetrap.bind ('g s', funcția (e) // funcția dvs. aici ...); 

Folosind mausul

Vom construi o pagină web simplă cu câteva comenzi rapide de la tastatură care permit utilizatorilor să acceseze anumite funcționalități pe site. Vom folosi jQuery pentru a facilita manipularea documentului HTML și selectarea elementelor HTML.

Să începem cu ceva ușor.

Vom lega o cheie care va permite utilizatorului să se concentreze rapid pe câmpul de introducere a căutării.

1. Următorul este marcajul HTML pentru căutare împreună cu id.

2. Apoi, vom crea o funcție care se va concentra pe intrarea de căutare.

 căutare funcțională () var search = $ ('# search'); search.val ("); search.focus (); 

3. În cele din urmă, legăm o cheie pentru a rula funcția.

 Mousetrap.bind ('/', căutare); 

4. Asta e. Acum ar trebui să navigați la intrarea de căutare apăsând butonul /.

Alternativ, puteți lega și combinația de taste, Ctrl / Cmd + F, care este o comandă rapidă populară utilizată pentru căutarea în mai multe aplicații desktop:

 Mousetrap.bind (['comanda + f', 'ctrl + f'], căutare); 

Folosind mouse-ul cu Bootstrap

Este ușor să integrați mouse-ul cu un cadru, de exemplu, Bootstrap. În acest al doilea exemplu, vom afișa o fereastră de ajutor care va afișa o listă de comenzi rapide disponibile pe site. Aici, optez pentru Bootstrap Modal să prezinte lista și să desemneze? cheie pentru a afișa modulul.

Desi ? este accesibilă numai cu ajutorul tastei Shift, legând doar elementul? cheia este suficientă.

 Mousetrap.bind ('?', Funcția () $ ('# help') modal ('show');); 

Acum când ai lovit? , va apărea un pop-up.

Sfat pentru legarea eficientă

De-a lungul timpului, colecția dvs. în creștere de comenzi rapide de la tastatură poate începe să vă strică codul. Dacă se întâmplă acest lucru, există o extensie pe care o puteți adăuga pentru a vă face “cheie obligatorie” codurile sunt mai eficiente. Este numit “bind dictionar”. Adăugați această extensie după biblioteca primară pentru mușchi, mousetrap.min.js.

Acum, în loc să separăm fiecare cheie de legare, îi putem grupa într-un singur mod .lega() metodă, cum ar fi:

 Mousetrap.bind ('/': căutare, 't': tweet, '?': Funcțional modal () $ (' ) highLight ('j'), 'k': funcția prev () highLight ('k')); 

Pentru o implementare mai avansată, puteți vedea demo-ul pe care l-am făcut. În demonstrație, puteți apăsa tasta J sau K pentru a evidenția postarea și apăsați T pentru a tweet postul curent pe care l-ați evidențiat.

• Vizualizați demonstrația
• Descarca