Wyszukiwarka KeyCode JavaScript
Po naciśnięciu dowolnego klawisza można uzyskać jego wartości keyCode, key, code i which
Przechwytywanie klawiatury
Kliknij tutaj i naciśnij klawisz
Zdarzenia klawiatury są przechwytywane tylko w tym obszarze. Klawisz Tab zapisuje klawisz i przenosi fokus do następnego elementu.
Aby uzyskać pełne zdarzenia klawiatury, należy użyć fizycznej klawiatury. Klawiatury mobilne mogą pomijać niektóre właściwości.
Ostatnio naciśnięte klawisze
Tutaj pojawi się ostatnich 10 naciśnięć klawiszy.
Szczegóły zdarzenia klawiatury
event.keyevent.codeevent.keyCodePrzestarzałeevent.whichPrzestarzałeevent.locationevent.repeatKlawisze modyfikujące
Aktywuj obszar przechwytywania, aby sprawdzić zdarzenie klawiatury.
O wyszukiwarce KeyCode JavaScript
Ta wyszukiwarka KeyCode JavaScript to darmowe, interaktywne narzędzie dla programistów, które natychmiast pokazuje wszystkie właściwości zdarzenia klawiatury po naciśnięciu dowolnego klawisza. Niezależnie od tego, czy tworzysz skróty klawiszowe, sterowanie do gier czy dostępną nawigację, znajomość dokładnych wartości event.key, event.code, event.keyCode i event.which jest niezbędna do pisania niezawodnego kodu JavaScript działającego w różnych przeglądarkach.
Nowoczesne aplikacje internetowe w dużym stopniu opierają się na obsłudze zdarzeń klawiatury, od walidacji formularzy po narzędzia do pracy zespołowej w czasie rzeczywistym. To narzędzie do sprawdzania kodów klawiszy eliminuje zgadywanie: w chwili naciśnięcia klawisza wyświetla kod fizyczny klawisza, wartość logiczną, identyfikator położenia oraz stan wszystkich modyfikatorów (Shift, Ctrl, Alt, Meta), bezpośrednio w przeglądarce i bez żadnej konfiguracji.
W odróżnieniu od statycznych tabel kodów klawiszy ten tester zdarzeń klawiszy JavaScript na żywo przechwytuje prawdziwe zdarzenia przeglądarki, dzięki czemu można sprawdzić działanie w różnych systemach operacyjnych i układach klawiatury. Wyraźnie oznacza też właściwości przestarzałe, co pomaga pisać kod gotowy na przyszłość i zgodny z aktualnymi standardami W3C Keyboard Event.
Najważniejsze funkcje
- Wyświetlanie w czasie rzeczywistym
event.key,event.code,event.keyCode,event.whichievent.location - Wizualne wskaźniki klawiszy modyfikujących pokazujące stan Shift, Ctrl, Alt i Meta
- Znaczniki przestarzałych właściwości, takich jak keyCode i which
- Kopiowanie wartości każdej właściwości zdarzenia jednym kliknięciem
- Eksport wszystkich danych klawisza jako sformatowanego obiektu JSON
- Tabela historii z ostatnimi 10 naciśnięciami klawiszy do porównania
- Automatyczne rozróżnianie klawiszy lewych, prawych i z klawiatury numerycznej
- Graficzne odwzorowanie klawisza ułatwiające jego rozpoznanie
- Obsługa każdego klawisza, w tym klawiszy funkcyjnych, strzałek i znaków specjalnych
- W pełni responsywny wygląd z obsługą trybu ciemnego
Jak korzystać z wyszukiwarki KeyCode JavaScript
- Aktywuj pole wprowadzania: Kliknij w dowolnym miejscu przerywanej strefy naciskania klawiszy u góry narzędzia, aby włączyć nasłuchiwanie klawiatury.
- Naciśnij dowolny klawisz: Naciśnij dowolny klawisz na klawiaturze, a wszystkie właściwości zdarzenia od razu pojawią się w siatce właściwości poniżej.
- Sprawdź stan modyfikatorów: Wskaźniki Shift, Ctrl, Alt i Meta pokazują, które modyfikatory były aktywne podczas naciśnięcia klawisza.
- Skopiuj wartości: Kliknij ikonę kopiowania obok właściwości, aby skopiować jej wartość, albo użyj przycisku „Copy All as JSON”, aby wyeksportować wszystkie właściwości naraz.
- Porównaj klawisze: Naciśnij kolejno kilka klawiszy i przewiń w dół do tabeli historii, aby porównać ich kody obok siebie.
- Wyczyść i powtórz: Przycisk Clear resetuje wszystkie dane i pozwala rozpocząć nową sesję testową.
Zastosowania
- Tworzenie skrótów klawiszowych: Ustal prawidłowe wartości key i code, aby zaimplementować własne skróty w aplikacjach internetowych.
- Sterowanie w grach: Przypisz fizyczne klawisze do akcji w grze, sprawdzając event.code, aby uzyskać skróty niezależne od układu klawiatury.
- Testowanie dostępności: Sprawdź, czy nawigacja klawiaturą działa poprawnie, a wszystkie elementy interaktywne reagują na oczekiwane klawisze.
- Migracja starszego kodu: Znajdź nowoczesne odpowiedniki event.key dla przestarzałych wartości event.keyCode używanych w starszych projektach.
- Debugowanie w różnych przeglądarkach: Potwierdź, że zdarzenia klawiszy dają spójne wartości w Chrome, Firefox, Safari i Edge.
- Walidacja pól formularzy: Ustal dokładne wartości klawiszy, aby zezwalać na określone znaki w polach tekstowych lub je blokować.
- Pisanie tutoriali i dokumentacji: Szybko sprawdź dokładne dane o kodach klawiszy, które trafią do przewodników dla programistów i materiałów referencyjnych.
- Rozróżnianie klawiatury numerycznej i głównej: Użyj właściwości location, aby odróżnić klawisze numeryczne od standardowych klawiszy cyfr.
Najczęściej zadawane pytania
Czym różni się event.key od event.code?
event.key zwraca logiczną wartość klawisza (np. „a” lub „A” w zależności od Shift), a event.code zwraca fizyczny klawisz na klawiaturze (np. „KeyA”) niezależnie od modyfikatorów i układu klawiatury. event.key należy stosować do wprowadzania znaków, a event.code do skrótów opartych na położeniu klawisza.
Czy event.keyCode jest nadal bezpieczny w użyciu?
event.keyCode jest oficjalnie przestarzałe według W3C i może działać niespójnie w różnych przeglądarkach. W nowych projektach należy używać event.key lub event.code. Wiele starszych baz kodu nadal jednak korzysta z keyCode, dlatego narzędzie wyświetla tę właściwość jako punkt odniesienia dla zgodności wstecznej.
Dlaczego pole location ma znaczenie?
Właściwość event.location pozwala odróżnić klawisze występujące na klawiaturze w kilku miejscach, na przykład lewy Shift od prawego albo rząd cyfr od klawiatury numerycznej. Ma to kluczowe znaczenie w aplikacjach, które muszą rozróżniać zduplikowane klawisze.
Czy to narzędzie jest darmowe?
Tak, Wyszukiwarka KeyCode JavaScript jest całkowicie darmowa, bez rejestracji, limitów użycia i ukrytych opłat. Można z niej korzystać tak często, jak jest to potrzebne podczas tworzenia i testowania.
Czy moje dane są bezpieczne?
Oczywiście. Cała detekcja klawiszy odbywa się w przeglądarce, na natywnych zdarzeniach klawiatury JavaScript. Żadne naciśnięcia klawiszy ani dane zdarzeń nie są wysyłane na serwer. Wprowadzane dane pozostają całkowicie prywatne na Twoim urządzeniu.
Czy to działa na urządzeniach mobilnych?
Narzędzie działa najlepiej z fizyczną klawiaturą. Na urządzeniach mobilnych klawiatura ekranowa może nie wywoływać wszystkich właściwości zdarzenia w spójny sposób. Aby uzyskać wiarygodne wyniki, najlepiej użyć komputera stacjonarnego lub laptopa albo podłączyć do urządzenia mobilnego zewnętrzną klawiaturę.
Wskazówki i dobre praktyki
- Do wprowadzania znaków używaj event.key: Automatycznie uwzględnia on układ klawiatury, język i stan modyfikatorów.
- Do sterowania w grach używaj event.code: Fizyczne położenie klawiszy pozostaje takie samo niezależnie od układu klawiatury użytkownika (QWERTY, AZERTY, Dvorak).
- Zawsze testuj kombinacje modyfikatorów: Naciśnij Ctrl+Shift+klawisz lub Alt+klawisz, aby upewnić się, że nasłuchiwanie skrótów przechwytuje właściwą kombinację.
- Szukaj wzorców w tabeli historii: Porównanie kilku naciśnięć klawiszy pomaga wychwycić niespójności lub szybciej znaleźć właściwe kody.
- Eksportuj JSON do dokumentacji: Funkcja „Copy All as JSON” pozwala wkleić dokładne dane klawisza prosto do komentarzy w kodzie lub dokumentacji dla programistów.
- Testuj w różnych przeglądarkach: Wartości zdarzeń klawiszy mogą się różnić między przeglądarkami, zwłaszcza w przypadku klawiszy specjalnych. Zawsze sprawdzaj docelowe przeglądarki.