Events - klawisze

keyDown, keyUp

Najczęściej używanymi zdarzeniami w przypadku klawiatury są:

keydown	naciśnięcie, przytrzymanie klawisza
keyup	puszczenie klawisza

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>
    `;
});

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