Nagaan op welke toets er is ingedrukt

Voor sommige toepassingen is het handig als je weet welke toets de gebruiker van je site heeft ingedrukt. Denk daarbij aan het zelf programmeren van sneltoetsen in een menu. Op deze bladzijde wordt uitgelegd hoe je dat kunt aanpakken.

Elk karakter dat je vanaf een toetsenbord kunt ingeven hoort tot een karakterset. In het Nederlandse taalgebied kan dat de ASCII-set of Unicode zijn.
In de ASCII-set is elk karakter opgeslagen in één byte (= 8 bits). De ASCII-set kan dus 256 karakters bevatten. In de praktijk zijn dat er minder omdat de ASCII-set ook contrôle-karakters bevat zoals Cr, Lf, Backspace, Tab, enz.
Unicode bestaat uit 2 of meer bytes. Daardoor kun je feitelijk elk karakter in Unicode kwijt, ook heel complexe zoals Chinees. Ook smiley's e.d. hebben elk een eigen Unicode. Zie ook het item over karaktersets.

Er is verschil tussen Charactercode en een Keycode
•   Charactercode is het volgnummer van een karakter in de UniCode set. Functietoetsen zijn daarin niet gedefinieerd. Als je in het voorbeeld op een functietoets drukt, verandert de charactercode niet.
•   Keycode is het nummer van de toets op het toetsenbord. Hiermee kun je ook functietoetsen detecteren.

Klik met de muis in het invoerveld en druk een toets in. Je ziet hoe de charactercode en de keycode worden weergegegeven:

Unicode CHARACTER code: (nog niet gedefinieerd)
Unicode KEY code: (nog niet gedefinieerd)

De code van het voorbeeld ziet er zo uit:
Hier staat alles in de <body>, maar het JavaScript kan ook in de <head>.)

<input type="text" onkeypress="uniCharCode(event)" onkeydown="uniKeyCode(event)">
 
<script>
function uniCharCode(event) {
  var char = event.keyCode;
  document.getElementById("Demo1").innerHTML =
    "Unicode CHARACTER code: " + char;
}
function uniKeyCode(event) {
  var key = event.keyCode;
  document.getElementById("Demo2").innerHTML =
    "Unicode KEY code: " + key;
}
</script>
 
<div id="Demo1">Unicode CHARACTER code:
  (nog niet gedefinieerd)</div>
<div id="Demo2">Unicode KEY code:
  (nog niet gedefinieerd)</div>

De HTML-code van het invoerveld heeft de attributen onkeypress en onkeydown. Zodra er een toets wordt ingedrukt (onkeypress), wordt de function uniCharcode gestart. Zodra er een toets is ingedrukt wordt de function uniKeyCode gestart.

In de code van de twee functions zie je dat er wordt gekeken naar een event. Dit is een keyboard-event. De gevraagde data worden opgehaald met de eigenschap keyCode voor de Unicode karaktercode en keyCode voor de Unicode keycode.

Bron: w3schools.com

Opmerking:
Voor het detecteren van specifieke toetsen zoals Shift en CapsLock raadpleeg je de items De Shift-, Alt-, Control- en Metatoets gebruiken en De CapsLock-, NumLock- en ScrollLock-toets gebruiken.

 
terug

html-577; Laatste wijziging: 30 mei 2020