Ostatnio pisałem o gestach myszy, które zastosowane na stronie www czy w aplikacji internetowej mogą znacznie ułatiwć użytkownikom korzytsanie z niej. Należy jednak zauważyć, że to udogodnienie ma sens w aplikacjach, w których korzystamy głównie z myszki.

Jeśli jednak na stronie użytkownik częściej korzysta z klawiatury, to sięganie po mysz, aby uruchomić jakąś usługę, może być kłopotliwe. Wtedy warto rozważyć wprowadzenie skrótów klawiaturowych.

Jakie skróty zastosować?

Musimy pamiętać, że skróty muszą być intuicyjne, nie powinny to być kombinacje klawiszy, a raczej jeden przycisk. Przykładowo Twitter stosuje skrót n, który służy do wyświetlania okienka, dzięki któremu możemy dodać nowy wpis.

Przechwytywanie wciśnięć klawiszy

Aby dowiedzieć się, jaki klawisz nacisnął użytkownik, musimy przechwycić zdarzenie onkeyup, czyli moment, w którym klawisz jest zwalniany. Dzięki właściwości keyCode, należącej do obiektu event, otrzymamy kod przycisku na klawiaturze, który został wciśnięty.

Aby poznać kody dla konkretnych klawiszy, możemy skorzystać z takiego skryptu:

$(document).keyup(function(ev) {
    console.log("keyCode: " + ev.keyCode);
});

W konsoli JavaScript zaraz po zwolnieniu klawisza otrzymamy "wydruk". Z konsoli JS możemy w łatwy sposób korzystać np. dzięki dodatkowi Firebug do przeglądarki Firefox.

Wybór zdarzenia dla kodu

Do przypisania odpowiednim wartościom keyCode odpowiednich funkcji najlepiej wykorzystać instrukcję switch.

Przykładowe wykorzystanie

Aby zaprezentować możliwości wykorzystania klawiatury i js, wykonałem małą aplikację, która pozwala na przesuwanie znanego pewnie wszystkim pacmana przy "ścianach" małej planszy za pomocą klawiszy strzałek.

Kod tego przykładu można zobaczyć na listingu. Demo dostępne jest tutaj. Wszystkie pliki projektu można pobrać tutaj.