Jak dodać skróty klawiaturowe do Twojej witryny

Kochasz skróty klawiaturowe? Mogą pomóc zaoszczędzić dużo czasu, prawda? Czy chcesz dodać skróty klawiaturowe do własnej witryny, z korzyścią dla odwiedzających? Poprawiłoby to znacznie dostępność i nawigację w witrynie.

W tym poście podam krótki przewodnik dotyczący dodawania skrótów do Twojej strony internetowej za pomocą biblioteki JavaScript o nazwie Mousetrap. Z pułapką na myszy możesz wyznacz klucze jak Shift, Ctrl, Alt, Opcje i Polecenie do wykonywać określone funkcje na swojej stronie internetowej. Działa również dobrze w starszych przeglądarkach.

Więcej o Hongkiat:

• Tworzenie animowanej podpowiedzi z łatwością dzięki Hint.Css
• Tworzenie przewodnika krok po kroku za pomocą Intro.Js [Tutorial]
• Jak stylować suwak zakresu HTML5
• Jak korzystać z przechowywania plików cookie i HTML5

Rozpoczęcie pracy

Rozpocznij od utworzenia nowego dokumentu HTML wraz z zawartością i połączenia biblioteki pułapki na myszy. Będę używał biblioteki pułapki na myszy hostowanej w CDNj, aby biblioteka była obsługiwana przez sieć CloudFlare, która powinna być szybsza niż nasz własny serwer

Teraz użyjemy pułapki na myszy 'wiązać' metoda dołączania klawiszy z funkcją. Możesz przypisać pojedynczy klucz, kombinacja klawiszy lub klawisze sekwencji, na przykład

Pojedynczy klucz

W tym przykładzie wiążemy s.

 Mousetrap.bind ('s', funkcja (e) // twoja funkcja tutaj…); 

Klucz kombinacyjny

W tym przykładzie łączymy Ctrl i s. Musisz nacisnąć dwa klawisze razem, aby wykonać wyznaczoną funkcję.

 Mousetrap.bind ('ctrl + s', funkcja (e) // twoja funkcja tutaj…); 

Klawisz sekwencji

W tym przykładzie użytkownik będzie musiał nacisnąć g, a następnie s następnie. Jeśli tworzysz grę internetową, może to być przydatne do dodania tajnego kombo ukrytego klucza.

 Mousetrap.bind ('g s', funkcja (e) // twoja funkcja tutaj…); 

Używanie pułapki na myszy

Zbudujemy prostą stronę internetową z kilkoma skrótami klawiaturowymi, które umożliwią użytkownikom dostęp do niektórych funkcji na stronie internetowej. Będziemy używać jQuery, aby ułatwić manipulowanie dokumentem HTML i zaznaczanie elementów HTML.

Zacznijmy od czegoś prostego.

Mamy zamiar powiązać klucz, który pozwoli użytkownikowi szybko skoncentrować się na polu wyszukiwania.

1. Poniżej znajduje się znacznik HTML dla wyszukiwania wraz z ID.

2. Następnie tworzymy funkcję, która skupi się na wejściu wyszukiwania.

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

3. Na koniec łączymy klucz, aby uruchomić tę funkcję.

 Mousetrap.bind ('/', szukaj); 

4. To jest to. Teraz powinieneś być w stanie przejść do wejścia wyszukiwania, naciskając przycisk /.

Alternatywnie możesz również powiązać kombinację klawiszy, Ctrl / Cmd + F, która jest popularnym skrótem klawiszowym używanym do wyszukiwania w wielu aplikacjach komputerowych:

 Mousetrap.bind (['command + f', 'ctrl + f'], szukaj); 

Używanie pułapki na myszy z bootstrapem

Łatwo jest zintegrować pułapkę na myszy ze strukturą, na przykład Bootstrap. W tym drugim przykładzie pokażemy okno pomocy, które wyświetli listę skrótów dostępnych na stronie. W tym miejscu wybieram Bootstrap Modal, aby przedstawić listę i wyznaczyć? klawisz, aby pokazać modal.

Chociaż ? jest dostępny tylko za pomocą klawisza Shift, wiążącego tylko? klucz jest wystarczający.

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

Teraz, kiedy trafisz? klawisz, pojawi się popup.

Wskazówka dla efektywnego wiązania

Z czasem rosnąca kolekcja skrótów klawiaturowych może zacząć zepsuć kod. Jeśli tak się stanie, istnieje rozszerzenie, które można dodać, aby utworzyć “wiązanie klucza” kody bardziej wydajne. Nazywa się “słownik powiązań”. Dodaj to rozszerzenie po podstawowej bibliotece pułapek na myszy, mousetrap.min.js.

Teraz, zamiast oddzielać każde powiązanie klawiszy, możemy zgrupować je w jednym .wiązać() metoda, tak:

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

Dla bardziej zaawansowanej implementacji możesz zobaczyć wersję demonstracyjną, którą stworzyłem. W wersji demonstracyjnej możesz nacisnąć klawisz J lub K, aby podświetlić post, i nacisnąć T, aby opublikować wiadomość, która została podświetlona.

• Wyświetl demo
• Ściągnij