Toetsenbord Keycode Visualizer Online. KeyCode Inspector

Gratis online tool om event.key, event.code, event.which en de locatie van elke toets in realtime te bekijken. Genereert direct bruikbare JavaScript-codefragmenten.

Druk op een toets

Een willekeurige toets op uw toetsenbord om de code te zien

Hulpmiddelenstudio

Wil je dit hulpmiddel op je website?

Pas kleuren en de donkere modus aan voor WordPress, Notion of je eigen site.

Veelgestelde vragen

Wat is het verschil tussen event.key en event.code?

event.code staat voor de fysieke toets op het toetsenbord, ongeacht de geconfigureerde taal. event.key staat voor het gegenereerde teken, dat kan veranderen als u Shift indrukt of een andere taal gebruikt. Gebruik code voor spelbesturingen; gebruik key voor tekstinvoer en semantische sneltoetsen.

Wat is event.which en waarom is het verouderd?

event.which is een verouderde eigenschap die een numerieke ASCII-code voor de toets teruggeeft. Het is in moderne standaarden als verouderd (deprecated) aangemerkt, omdat event.key en event.code het vervangen met nauwkeurigere en beter leesbare informatie. Het wordt in deze tool weergegeven voor educatieve doeleinden.

Wat betekent de location-eigenschap?

De location-eigenschap geeft aan waar de toets fysiek op het toetsenbord staat: Standard (normale positie), Left (linker modifier), Right (rechter modifier) of Numpad (numeriek toetsenbord). Het is handig om bijvoorbeeld de linker en rechter CTRL-toets van elkaar te onderscheiden.

Werkt het met internationale toetsenborden en niet-QWERTY-indelingen?

Ja. De tool toont precies wat de browser rapporteert voor uw toetsenbordconfiguratie. event.code geeft altijd de QWERTY-naam van de fysieke positie terug, terwijl event.key het werkelijke teken weergeeft op basis van uw taal.

# Toetsenbordgebeurtenissen in JavaScript begrijpen

Wanneer een gebruiker een toets indrukt, vuurt de browser drie gebeurtenissen af: keydown, keypress en keyup. Elk geeft eigenschappen bloot met informatie over de ingedrukte toets, maar niet alle zijn gelijkwaardig of aanbevolen.

# Eigenschappen van toetsgebeurtenissen

event.code — De fysieke toets

Geeft de identifier terug van de fysieke positie van de toets op het toetsenbord, met behulp van QWERTY-nomenclatuur. De "A"-toets op een AZERTY-toetsenbord geeft bijvoorbeeld KeyQ terug. Ideaal voor spelbesturingen waarbij de positie telt, niet het teken.

event.key — Het gegenereerde teken

Geeft de tekenwaarde terug die gegenereerd wordt op basis van taal en actieve modifiers. Shift+A indrukken geeft "A" terug; zonder Shift geeft het "a". Voor speciale toetsen geeft het namen terug zoals "Enter", "Escape", "ArrowUp".

# Wanneer welke eigenschap gebruiken

Gebruik event.code voor spelbesturingen (WASD ongeacht de taal) en event.key om specifieke tekens of semantische sneltoetsen zoals Ctrl+C te detecteren.
De eigenschappen event.which en event.keyCode zijn officieel verouderd volgens de W3C-standaard. Hoewel moderne browsers ze blijven ondersteunen voor compatibiliteit, mogen ze niet worden gebruikt in nieuwe code.

Bibliografische Referenties