De Shift-, Alt-, Control- en Metatoets gebruiken
Het toetsenbord van computers heeft speciale toetsen die, als ze worden ingedrukt samen met een 'gewone' toets, de functie van die betreffende toets veranderen. De toetsen zijn:
- Alt. Linker of rechter Alt-toets, zit meestal naast de spatiebalk.
- AltGraph. Rechter Alt-toets, zit meestal naast de spatiebalk. Deze toets in combinatie met een 'gewone' toets kan
een ander karakter geven dan alleen de de 'gewone' toets. Bijvoorbeeld: AltGr+5 geeft een €-teken.
De toets AltGraph heeft hetzelfde effect als Control + Alt. - Control. Linker of rechter Control-toets. Zit meestal op de onderste rij, helemaal aan de buitenkant.
- Meta. Linker of rechter Meta-toets. Zit meestal op de onderste rij, tussen de Alt- en Control-toetsen.
Deze toets komt op veel toetsenborden niet voor. Op MAC-computers is het de Command/Cmd-toets (⌘). Op Windows-computers is het de Windows-toets (⊞). - Shift. Linker of rechter Shift-toets. Zit vaak op de tweede rij van onderen, helemaal aan de buitenkant.
De bovengenoemde toetsen worden worden aangeduid met de term 'modifier'. Ze veranderen namelijk tijdelijk iets aan het gedrag
van het toetsenbord.
Het toetsenbord moet aan een HTML-element zijn gekoppeld om het toetsenbord te kunnen bevragen over de stand van deze toetsen.
Dergelijke elementen zijn <input> en <textarea>. Door die elementen moet een keyboard-event
zijn afgevuurd, nl. dat er een toets is ingedrukt. Dit gebeurt door het Object KeyboardEvent, dat standaard in elke
browser beschikbaar is.
Voor het detecteren van de modifiers is er de methode getModifierStatus(toets). De parameter toets is de naam van de toets waarvan je de status wilt weten. Behalve de 'tijdelijke' modifiers is zijn er ook modifiers met een meer permanent karakter, zie het item De CapsLock-, NumLock- en ScrollLock-toets gebruiken).
getModifierStatus() retourneert de waarde true (lees: Ingedrukt of 'toets omlaag') of false (lees: Niet ingedrukt of: 'toets omhoog').
De JavaScript-functie wordt actief als het invoerveld wordt veranderd. Bij het laden van de pagina of als het invoerveld de focus krijgt kun je de stand van de toetsen nog niet opvragen. Dat kan pas na een verandering van het invoerveld.
Om te zien hoe het werkt klik je met de muis in het invoerveld en geef je een karakter in:
Alt : --
AltGr : --
Control: --
Meta : --
Shift : --
Opmerking: Als je dit uitprobeert kun je op zij-effecten stuiten. Zo is in MS-Edge de combinatie Control+H
een sneltoets om de browser-geschiedenis op het scherm te tonen. Dit soort toetsencombinaties wordt door de browser afgevangen
vóórdat het in het invoerveld terechtkomt.
Opmerking: Als het invoerveld de focus kwijtraakt, werkt het voorbeeld niet meer. Je moet dan opnieuw in het
invoerveld klikken om het de focus terug te geven.
De code van het voorbeeld ziet er zo uit:
(Zet alles in de <body>; het JavaScript moet na de HTML komen)
<p>Om te zien hoe het werkt klik je met de muis in het invoerveld
en geef je een karakter in: <input type="text" id="voorbeeld"
value="Verander deze tekst"><br>
<code style="color:maroon; font-size:1.1em">
Alt : </code>
<code style="color:navy; font-size:1.1em" id="Alt">
--</code><br>
<code style="color:maroon; font-size:1.1em">AltGr
: </code>
<code style="color:navy; font-size:1.1em" id="AltGraph">
--</code><br>
<code style="color:maroon; font-size:1.1em">Control: </code>
<code style="color:navy; font-size:1.1em" id="Control">
--</code><br>
<code style="color:maroon; font-size:1.1em">Meta
: </code>
<code style="color:navy; font-size:1.1em" id="Meta">
--</code><br>
<code style="color:maroon; font-size:1.1em">Shift
: </code>
<code style="color:navy; font-size:1.1em" id="Shift">
--</code></p>
<script>
var vv = document.getElementById('voorbeeld');
var aa = document.getElementById('Alt');
var gg = document.getElementById('AltGraph');
var cc = document.getElementById('Control');
var mm = document.getElementById('Meta');
var ss = document.getElementById('Shift');
vv.addEventListener("keydown", function(event) {
if (event.getModifierState("Alt"))
aa.innerHTML = "Ingedrukt";
else
aa.innerHTML = "Los";
if (event.getModifierState("AltGraph"))
gg.innerHTML = "Ingedrukt";
else
gg.innerHTML = "Los";
if (event.getModifierState("Control"))
cc.innerHTML = "Ingedrukt";
else
cc.innerHTML = "Los";
if (event.getModifierState("Meta"))
mm.innerHTML = "Ingedrukt";
else
mm.innerHTML = "Los";
if (event.getModifierState("Shift"))
ss.innerHTML = "Ingedrukt";
else
ss.innerHTML = "Los";
})
</script>
Bron: w3schools.com
