Artykuł

lis 23 2011
0

Obsługa zdarzeń klawiatury w jQuery

Jakiś czas temu, pisałem na temat obsługi zdarzeń w jQuery. Dziś chciałbym wrócić do tej tematyki, a konkretniej przyjrzeć się zdarzeniom związanym z obsługą klawiatury.

Obsługa klawiatury, jest stosunkowo rzadko implementowana przez programistów JavaScript/jQuery - tak przynajmniej wynika z mojej własnej obserwacji. W gruncie rzeczy, jest to jednak bardzo fajny sposób na zwiększenie usability (z ang. użyteczności) naszej strony. Na skróty klawiszowe, już dawno postawił np. Google w swoim czytniku RSS. Po ostatnich zmianach, mam wrażenie że skróty klawiszowe są nawet bardziej wyeksponowane.

Obsługa klawiatury może być również bardzo pomocna przy wszelakich formularzach.

Słowem wstępu - zdarzenia w jQuery 1.7

W jQuery w wersji 1.7 pojawiły się istotne zmiany związane z obsługą zdarzeń. Metody live oraz die, które były wykorzystywane do podpinania zdarzeń dynamicznych, zostały określone jako przestarzałe (wczoraj zaktualizowałem wpis związany z obsługą zdarzeń w jQuery).

W zamian, można korzystać z delegatów, które dostępne były już wcześniej oraz z nowych metod on i off, które odpowiednio podpinają oraz usuwają zdarzenia.

Oczywiście wciąż działa metoda bind oraz skrócone aliasy dla każdego typu zdarzenia (click, change itp.).

Obsługa zdarzenia naciśnięcia przycisku - .keydown()

Obsługa naciśnięcia przycisku w jQuery, realizowana jest za pomocą metody .keydown(). Metoda ta, zasadniczo występuje w trzech różnych postaciach:

  • .keydown()
    Wersja bez argumentów, działa niczym Trigger (z ang. Wyzwalacz). Zastosowana dla określonego elementu, wyzwala zdarzenie naciśnięcia klawisza programowo:
    $("body").keydown();
  • .keydown(handler(eventObject))
    Sygnatura metody zapisana w tej postaci, pozwoli na wywołanie funkcji zdefiniowanej przez użytkownika, za każdym razem kiedy zdarzenie będzie miało miejsce:
    $("body").keydown(function(oEvent){
        // tutaj kod obsługi 
    });
  • .keydown([eventData], handler(eventObject));
    Ta wersja metody, pozwala również na obsługę własnej funkcji użytkownika oraz umożliwia przekazanie danych za pomocą obiektu eventData

Obsługa zdarzenia zwolnienia przycisku - .keyup()

Obsługa zwolnienia przycisku w jQuery, realizowana jest w bardzo podobny sposób jak obsługa jego naciśnięcia. Wszystko odbywa się tu w sposób analogiczny jak w przypadku keydown, zmienia się głównie nazwa metoda. Metoda ta, również występuje w trzech postaciach:

  • .keyup()
    Wersja bez argumentów, działa niczym Trigger (z ang. Wyzwalacz). Zastosowana dla określonego elementu, wyzwala zdarzenie zwolnienia klawisza programowo:
    $("body").keyup();
  • .keyup(handler(eventObject))
    Sygnatura metody zapisana w tej postaci, pozwoli na wywołanie funkcji zdefiniowanej przez użytkownika, za każdym razem kiedy zdarzenie będzie miało miejsce:
    $("body").keyup(function(oEvent){
        // tutaj kod obsługi 
    });
  • .keyup([eventData], handler(eventObject));
    Ta wersja metody, pozwala również na obsługę własnej funkcji użytkownika oraz umożliwia przekazanie danych za pomocą obiektu eventData

Zdarzenie przytrzymania przycisku - .keypress()

O zdarzeniu .keypress() będzie krótko, ponieważ nie zostało ono określone przez żadną specyfikację i może być różnie interpretowane przez przeglądarki. Generalnie, samo zdarzenie jest bardzo podobne do zdarzenia .keydown istnieje jednak pewna subtelna różnica między nimi.

W przypadku kiedy naciśniemy klawisz na klawiaturze i przytrzymamy go, to zdarzenie .keydown zostanie wywołane tylko raz. Inaczej jest w przypadku zdarzenia .keypress, ponieważ zostanie ono wywołane ponownie dla każdego wprowadzonego w ten sposób znaku (tak przynajmniej mówi dokumentacja jQuery).

Metody są w tym przypadku identyczne jak w poprzednich przykładach (zmienia się oczywiście sama nazwa) dlatego też pominę już ich opis.

Przykład praktyczny

Na zakończenie, napiszemy prosty przykład, który zobrazuje działanie wszystkich trzech opisanych dzisiaj zdarzeń. Głównym zadaniem naszego skryptu, będzie przechwycenie momentu wystąpienia określonego zdarzenia, a następnie zapisanie informacji o zdarzeniu oraz użytym kodzie przycisku do logu (przez log rozumieć będziemy akapit w HTML). Kod przycisku, będzie można pobrać z właściwości keycode obiektu zdarzenia, natomiast typ zdarzenia z właściwości type tegoż samego obiektu.

Spójrzmy zatem na kod:

<html lang="pl">
	<head>
		<meta charset="utf-8" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
		<script>
			$(document).ready(function() {
				function WriteToLog(oEvent){
					$("#log").append("Zdarzenie: <strong>" + oEvent.type + 
						"</strong>, kod przycisku: <strong>" + 
						oEvent.keyCode + "</strong><br />");
				}
				$(window).bind("keydown", function(oEvent){
					WriteToLog(oEvent);
				});
				$(window).bind("keypress", function(oEvent){
					WriteToLog(oEvent);
				});
				$(window).bind("keyup", function(oEvent){
					WriteToLog(oEvent);
				});
			});
		</script>
		<title>Test</title>
	</head>
	<body>
		<p id="log"></p>
	</body>
</html>

Jak widać, kod nie jest przesadnie skomplikowany. Najpierw tworzymy metodę, który pozwoli na zapisywanie do naszego logu, a następnie podpinamy trzy zdarzenia (zasadniczo można by to zrobić za pomocą jednej metody, ale nie chciałem przesadnie komplikować kodu). W każdym zdarzeniu wywołujemy naszą metodę WriteLog przekazując do niej obiekt danego zdarzenia.

W tym przypadku, zdarzenia zostały podpięte do całego okna. Nic nie stoi jednak na przeszkodzie, by zamiast okna podać konkretny selektor.

Bezwzględnie zalecam przetestowanie kodu związanego z obsługą klawiatury pod różnymi przeglądarkami - szczególnie zwróćcie uwagę na zdarzenie keypress.

Demo można uruchomić tutaj.

API

Data ostatniej modyfikacji: 09.12.2011, 22:14.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus