Utilia
Categorieën ▾
Taal: nl ▾

Toetscode opzoeken

Druk op een toets en zie de JavaScript-waarden event.key, event.code, keyCode, which en location, met modifiers, toetsgeschiedenis en een keycodetabel.

Klik op “Toetsen vastleggen” of op het vak hieronder en druk dan op een toets. Klik buiten het vak om het toetsenbord terug te geven aan de pagina.

event.key Druk op een toets keyCode – Tab, pijltjestoetsen en sneltoetsen worden hier ook vastgelegd.
event.key
–
event.code
–
event.keyCode
–
event.which
–
event.location
–
event.repeat
–
Vergrendeltoetsen aan
–
Modifiers
ctrlKey shiftKey altKey metaKey
Toetsgeschiedenis (nieuwste eerst)
Toetsgeschiedenis (nieuwste eerst)
EventkeycodekeyCodelocationModifiersrepeat
Overzicht van toetscodes (US QWERTY)

Overzicht van toetscodes (US QWERTY)
keycodekeyCodelocationOpmerking

De key-waarden gelden voor een Amerikaanse indeling zonder modifiers; andere indelingen geven andere tekens voor dezelfde code. keyCode en which zijn verouderd, maar worden nog veel gebruikt.

Zo zoek je een toetscode op

  1. Klik op Toetsen vastleggen of op het grote vak. Een gekleurde rand laat zien dat het vak luistert.
  2. Druk op een toets of sneltoets. De grote weergave toont de waarde van key en de oude keyCode, en de kaarten eronder geven event.key, event.code, event.keyCode, event.which, event.location, event.repeat en Vergrendeltoetsen aan (Caps Lock, Num Lock, AltGraph).
  3. De badges bij Modifiers lichten op voor ctrlKey, shiftKey, altKey en metaKey.
  4. Kopieer de JavaScript-snippet voor deze toets. Kies bij Vergelijken op tussen event.key, event.code of event.keyCode (verouderd).
  5. Scrol door de Toetsgeschiedenis (nieuwste eerst) om meerdere aanslagen te vergelijken. Vink Ook keyup-events loggen aan om ook het loslaten van toetsen te zien.
  6. Blader door of filter in het Overzicht van toetscodes (US QWERTY) als je een waarde nodig hebt zonder op de toets te drukken.

Zolang het vak de focus heeft, wordt de standaardactie van elke toets geblokkeerd. Tab, de pijltjestoetsen, Backspace of Ctrl+S worden dus vastgelegd in plaats van de focus te verplaatsen of een venster te openen. Klik ergens buiten het vak om het toetsenbord terug te geven aan de pagina. Een paar sneltoetsen worden door het besturingssysteem afgehandeld voordat de browser ze ziet (Alt+Tab, Ctrl+Alt+Del, Cmd+Tab, vaak ook Print Screen), dus geen enkele webpagina kan ze lezen.

key, code of keyCode: welke gebruik je?

Een KeyboardEvent bevat meerdere waarden die elk een andere vraag beantwoorden:

Eigenschap Wat ze vertelt Voorbeeld (de A-toets op AZERTY)
key Het teken of de benoemde toets die ontstaat, na indeling en modifiers "a", "A" met Shift
code De fysieke positie van de toets, los van de indeling "KeyQ"
keyCode / which Een oud getal, meestal de ASCII-code van de hoofdletter 65
location 0 standaard, 1 links, 2 rechts, 3 numeriek toetsenblok 0

Gebruik key als de betekenis telt: Enter om te verzenden, Escape om te sluiten, “?” om een helppaneel te openen. Gebruik code voor games en sneltoetsen die van de positie van de toetsen afhangen, zoals bewegen met WASD, dat op een Belgisch AZERTY- of Duits QWERTZ-toetsenbord op dezelfde plek moet blijven. Vermijd keyCode en which in nieuwe code: ze zijn verouderd, hun waarden verschillen per browser bij leestekens (Firefox geeft 59 voor de puntkomma, Chrome 186) en ze maken geen onderscheid tussen de linker en rechter Shift of tussen de twee Enter-toetsen. Ze zijn nog wel nuttig als je oudere code onderhoudt, en daarom toont deze tool ze ook.

Over de snippet

De gegenereerde listener reageert op precies de toets die je hebt ingedrukt, inclusief Ctrl, Alt en Meta. Bij afdrukbare tekens waarop met key wordt vergeleken, blijft Shift weg, omdat die al in de waarde zit: Shift+1 geeft "!" op een Amerikaanse indeling. Druk je alleen op een modifier, dan herhaalt de snippet die vlag niet. Bedenk dat metaKey op een Mac de Cmd-toets is en op een pc de Windows-toets; sneltoetsen voor alle platforms testen daarom meestal event.ctrlKey || event.metaKey.

Veelgestelde vragen

Waarom toont keyCode hetzelfde getal voor verschillende tekens?

keyCode identificeert de toets, niet het teken. Het cijfer 1 en “!” delen 49, en “a” en “A” delen 65. Lees key om het echte teken te krijgen.

Waarom wordt mijn AZERTY-toets als KeyQ getoond?

code noemt toetsen naar hun positie op een Amerikaans QWERTY-toetsenbord. De toets met een A erop zit op een AZERTY-toetsenbord waar op een Amerikaans toetsenbord de Q zit, dus de code is KeyQ terwijl key “a” is.

Wat betekent “Dead” in event.key?

Het is een dode toets, zoals ^ of ¨, die wacht op de volgende toets om een letter met accent te vormen. Op een Nederlandse toetsenbordinstelling (VS-internationaal) gelden bijvoorbeeld ook ’ en ” als dode toetsen. Het uiteindelijke teken komt mee met het volgende toetsevent of met het input-event van een tekstveld.

Waarom staat event.repeat op ja?

Je houdt de toets ingedrukt en het besturingssysteem stuurt automatische herhalingen. Controleer event.repeat om die te negeren, bijvoorbeeld om een sneltoets maar één keer uit te voeren.

Wordt wat ik typ opgeslagen of verstuurd?

Nee. De toetsevents worden door deze pagina in je browser gelezen en nergens naartoe gestuurd. De geschiedenis verdwijnt als je de pagina herlaadt of verlaat.

Vergelijkbare tools