Events - klawisze
keyDown, keyUp
Najczęściej używanymi zdarzeniami w przypadku klawiatury są:
keydown | naciśnięcie, przytrzymanie klawisza |
---|---|
keyup | puszczenie klawisza |
Istnieje też zdarzenie keypress
, które jest bardzo podobne do keydown
, z tym że działa tylko dla klawiszy graficznych. W dzisiejszych czasach nie jest zalecane używanie tego zdarzenia.
Który klawisz został naciśnięty
Jak w przypadku innych zdarzeń przekazywany do naszej funkcji obiekt udostępnia nam dużo pożytecznych informacji.
Aby odczytać, który klawisz został naciśnięty możemy posłużyć się dwoma właściwościami: event.key oraz event.code.
event.key | Nazwa klawisza z uwzględnieniem wielkości liter |
---|---|
event.code | Kod klawisza bez uwzględnienia wielkości liter |
const input = document.querySelector("#keyTestEvent")
const div = document.querySelector("#keyTestEventShow");
input.addEventListener("keydown", e => {
div.innerHTML = `
e.key: <b>${e.key}</b><br>
e.code: <b>${e.code}</b><br>
e.keyCode: <b>${e.keyCode}</b>
`;
});
Niektórzy użytkownicy mogą przełączać się między językami lub układami klawiatury. W takim przypadku event.key
zwróci literę która przypisana jest do danego klawisza, natomiast event.code
zawsze zwróci ten sam kod fizycznego klawisza.
Mobilna klawiatura
W przypadku klawiatur mobilnych znanych pod nazwą IME (Input-Method Editor), standard W3C wskazuje, że właściwość event.keyCode
dla każdego klawisza powinna wynosić 229
, natomiast właściwość event.key
powinna wynosić "Unidentified"
. Powinna...
Przetestowałem kilka przeglądarek mobilnych, które miałem pod ręką. Różnie z tym bywało.
input
W większości sytuacji reakcja na klawisze będzie wiązała się z obsługą formularzy. Korzystanie z powyższych zdarzeń nie zawsze będzie najlepszym wyborem, ponieważ mamy kontrolki, których zawartość możemy zmieniać za pomocą dodatkowych elementów. Dla pola number są to dodatkowe strzałeczki, a dla pola input:search jest to dodatkowy "x", który pojawia się po wpisaniu zawartości do takiego pola. Dla tych pól zdarzenia keydown
i keyup
nie będzie dobrym wyborem, ponieważ zdarzenia te nie reagują, gdy zawartość pól zmieniamy za pomocą np. strzałeczek.
{
const input = document.querySelector("#input1");
const div = document.querySelector("#div1");
input.addEventListener("keyup", e => {
div.innerText = input.value;
})
}
{
const input = document.querySelector("#input2");
const div = document.querySelector("#div2");
input.addEventListener("input", e => {
div.innerText = input2.value;
})
}
Sprawdź poniższy przykład w debugerze. Wpisz z palca, lub zmień zawartość strzałeczkami:
Blokowanie wpisywania
Dość częstą sytuacją będzie konieczność zablokowania wpisywania określonych znaków do danego pola. Przykładem może być pole number. W przeglądarce Chrome możemy do niego wpisywać tylko cyfry (plus ich naukowy zapis poprzedzony literą e), natomiast Firefox pozwala wpisywać dowolny znak.
Różne są techniki na rozwiązanie tego problemu. Część z nich lepsza, część gorsza. Poniżej pokaże ci dwie sprawdzone.
Pierwsza z nich polega na sprawdzaniu aktualnej wartości pola (za pomocą wyrażeń regularnych) i w razie błędu cofaniu do poprzedniego stanu. W tym przypadku najlepiej sprawdzi się zdarzenie input
.
const input = document.querySelector("input");
const s = Symbol();
input[s] = input.defaultValue; //odkładam poprzednia wartość
input.addEventListener("input", e => {
if (/^[abcdef]*$/i.test(input.value)) {
input[s] = input.value;
} else {
input.value = input[s];
}
})
W drugiej technice skorzystamy ze zdarzenia beforeinput
. Działa ono podobnie do zdarzenia
input
, ale dzieje się przed wstawieniem tekstu do pola. Możemy tutaj odczytać dodatkową właściwość data
, która wskazuje na wstawianą do pola treść:
const input = document.querySelector("input");
input.addEventListener("beforeinput", e => {
if (e.data !== null && !/^[abcdef]+$/i.test(e.data)) e.preventDefault();
})
Trening czyni mistrza
Jeżeli chcesz sobie potrenować zdobytą wiedzę, zadania znajdują się w repozytorium pod adresem: https://github.com/kartofelek007/zadania