W wielu aplikacjach internetowych (np. GMail) można wykorzystywać znane skróty klawiszowe. W jaki sposób twórcy tych stron zdołali podpiąć się pod wciśnięcie ctrl + S w celu zapisania wersji roboczej listu? Dlaczego nie wyświetla się systemowy dialog zapisu witryny? Na te pytania odpowiem w tym wpisie.
Przechwytywanie zdarzeń klawiatury
Wciśnięcie klawisza na klawiaturze wywołuje kolejno kilka zdarzeń:
- keydown
- keypress
- keyup
W tym wpisie będę korzystał z `keydown’. Więcej nt. obsługi zdarzeń klawiaturowych na stronach dokumentacji mozilli.
Funkcję obsługi zdarzenia przypiszę jako atrybut do znacznika <body />. Pokazane przykłady działają w przeglądarkach. W IE mogą nie działać.
<html> <head> <title>Obsługa skrótów klawiszowych</title> <script type="text/javascript"> function keyUpHandler(e) { alert('Wcisnąłeś klawisz!'); } </script> </head> <body onkeyup="keyUpHandler(event)"></body> </html>
Po uruchomieniu powyższego przykładu każde wciśnięcie przycisku na klawiaturze wywoła alert z napisem “Wcisnąłeś klawisz!”.
Przechwytywanie zdarzeń klawiatury w Internet Explorerze
Pokazany wyżej przykład działa w przeglądarkach. W IE nie działa. Innym sposobem działającym na pewno w FF i Chromie jest nadpisanie właściwości `onkeyup’ obiektu `window’:
window.onkeyup = function(e) { alert('działa'); }
Ten sposób jednak także nie działa w domyślnym programie MS Windows. W Internet Explorerze działa natomiast nadpisanie właściwości `onkeyup’ obiektu document:
document.onkeyup = function(e) { alert('działa'); }
Dlatego w dalszej części wpisu będę używał właśnie tego sposobu.
Problem MSIE z parametrem przekazywanym do handlera
Prócz problematycznego przypisywania funkcji obsługi zdarzeń, występuje także problem z innym przekazywaniem parametru do funkcji obsługi zdarzeń. IE nie przekazuje żadnego parametru. Tworzy natomiast globalny obiekt `event’. Stąd też naszą funkcję należy rozszerzyć o taki kod:
function keyUpHandler(e) { e = e || event; alert('Wcisnąłeś klawisz!'); } document.onkeyup = keyUpHandler;
W ten sposób udało się załatać (póki co) wszystkie problemy związane z wyrobem giganta z Redmond.
Rozpoznawanie klawiszy Ctrl, Alt, Shift
Większość skrótów klawiszowych jest kombinacją klawiszy ctrl, alt, shift i litery. Jak jednak rozpoznać, że klawisz specjalny został wciśnięty?
Do funkcji obsługi zdarzenia `keyup’ przekazywany jest obiekt `KeyboardEvent‘. Pośród wielu pól posiada także flagi:
- altKey
- ctrlKey
- shiftKey
Każde z tych pól ma wartość `true’/`false’ oznaczającą, czy podczas wciśnięcia innego klawisza ten był również przytrzymany. Dzięki temu łatwo można przechwycić kombinację klawiszy za pomocą prostego warunku:
function keyUpHandler(e) { e = e || event; if (e.altKey) { alert("Z wciśniętym altem"); } if (e.shiftKey) { alert("Z wciśniętym shiftem"); } if (e.ctrlKey) { alert("Z wciśniętym control"); } }
Powyższy przykład wyświetli alerty dla kombinacji klawiszowych z ctrl, shift oraz alt. Dla prawego alt uzna, że wciśnięto zarówno ctrl jak i alt.
Warto przeczytać:
Blokowanie domyślnej akcji skrótu
Aby zablokować domyślną akcję wywoływaną na określony skrót należy wykorzystać obsługę zdarzenia `keypress’. Podpięta funkcja obsługi tego zdarzeaia powinna zwracać `false’:
document.onkeypress = function() { return false; // zablokuj domyślną akcję skrótu }
Odczyt wciśniętej litery
Póki co jeszcze nie pokazałem jak odczytać literę. Do odczytu wartości wciśniętej litery służy pole `event.keyCode’:
function keyUpHandler(e) { e = e || event; alert("kod: " + e.keyCode+ '\nlitera: ' + String.fromCharCode(e.keyCode)); }
Rozpoznawanie strzałek i klawiszy funkcyjnych
function keyUpHandler(e) { e = e || event; alert("kod: " + e.keyCode); }
Przydatną informacją mogą być wartości strzałek na klawiaturze (np. do gry napisanej w JavaScript):
- lewa: 37
- góra: 38
- prawa: 39
- dół: 40
Skróty klawiszowe
Skoro już wiemy jak odczytywać większość wciśniętych klawiszy, czas stworzyć kawałek kod odpowiedzialny za obsługę kliku zdarzeń:
function keyUpHandler(e) { e = e || event; var keyCode = e.keyCode, letter = (String.fromCharCode(e.keyCode) || '').toLowerCase(); if (e.altKey && 'a' === letter || 'ą' === letter) { alert("Dziwny skrót, ale działa!"); } if (e.shiftKey && 'b' === letter) { alert("Wysyłam mail!"); } if (e.ctrlKey && 's' === letter) { alert("Zapisuję"); } if (113 === keyCode) { alert("Wcisnąłeś F2. Ale nie wspieramy tego skrótu"); } return false; }
Oczywiście to dopiero początek możliwości pracy z klawiaturą. Można także tworzyć skróty zawierające jednocześnie kilka klawiszów (ctrl, alt, funkcyjne, literę).
Powodzenia 🙂
1 comment