De CapsLock-, NumLock- en ScrollLock-toets gebruiken
Het toetsenbord van de meeste computers heeft drie speciale toetsen die "Aan" uit "Uit" kunnen staan. Die zijn er voornamelijk voor het gemak van de gebruiker. De toetsen zijn:
- CapsLock. Dit keert de functie van de Shift-toets gedeeltelijk om. Als CapsLock aan staat levert het toetsenbord hoofdletters af. In combinatie met Shift krijg je kleine letters. Dit werkt alleen met letters. De functie van toetsen met cijfers en andere tekens verandert niet.
- NumLock. Dit werkt alleen op het numerieke toetsenblok aan de rechterkant van de meeste toetsenborden. Als NumLock aan staat worden er cijfers geproduceerd, anders werken de toetsen voor navigatie: Pijltjes, PgUp, PgDn, enz. NumLock ontbreekt vaak op toetsenborden van laptop-computers.
- ScrollLock. Deze toets wordt weinig gebruikt en daardoor is de functie van deze toets nogal vaag. In sommige UNIX-uitvoeringen wordt ScrollLock gebruikt om uitvoer naar het scherm te pauzeren. In Microsoft Excel verandert ScrollLock de functie van de pijltjestoetsen. Het toetsenbord van Apple Macintosh computers heeft geen ScrollLock-toets.
Uit het bovenstaande zou je kunnen afleiden dat CapsLock het belangrijkste is. Dat is ook zo. Als CapsLock aan staat bij het blind invoeren van een wachtwoord, zal dat wachtwoord vaak geweigerd worden. Dan is het handig als er een een melding op het scherm verschijnt als CapsLock aan staat.
De drie toetsen worden worden aangeduid met de term 'modifier'. Ze veranderen namelijk 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 de 'Lock'-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. Voor dit verhaal gaat het om de de namen CapsLock, NumLock en ScrollLock (er zijn er meer, zie het item De Shift-, Alt-, Control- en Metatoets gebruiken).
getModifierStatus() retourneert de waarde true (lees: Aan) of false (lees: Uit).
De JavaScript-functie wordt actief als het invoerveld wordt veranderd. Je kunt –helaas– niet op voorhand waarschuwen dat CapLock, NumLock en/of ScrollLock aan of uit staan.
Om te zien hoe het werkt klik je met de muis in het invoerveld:
CapsLock : --
NumLock : --
ScrollLock: --
Onderaan de bladzijde zie je de code voor het detecteren van CapsLock, NumLock en ScrollLock. Zoals je ziet hoef je alleen de parameter van getModifierState() te veranderen.
Opmerking:
Er is nog een vierde toets op je toetsenbord die "Aan" of "Uit" kan staan: Insert of Ins.
Dit heeft alleen invloed op het typen van tekst. Als Ins aan staat, wordt elk getypt karakter op de plaats gezet waar
de cursor is ongeacht of er al wat staat of niet. Als Ins uit staat, wordt het getypte karakter ingevoegd.
Op het moment dat dit geschreven wordt is er geen JavaScript-functie beschikbaar om de stand van Ins te onderzoeken.
Ik heb het althans niet kunnen vinden.
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:
<input type="text" id="voorbeeld" value="Verander deze tekst"><br>
<code style="color:maroon; font-size:1.1em">CapsLock :
</code><code style="color:navy; font-size:1.1em" id="Caps">--
</code><br>
<code style="color:maroon; font-size:1.1em">NumLock
: </code><code style="color:navy;
font-size:1.1em" id="Num">--</code><br>
<code style="color:maroon; font-size:1.1em">ScrollLock: </code>
<code style="color:navy; font-size:1.1em" id="Scroll">--</code></p>
<script type="text/javascript">
var aa = document.getElementById('voorbeeld');
var cc = document.getElementById('Caps');
var nn = document.getElementById('Num');
var ss = document.getElementById('Scroll');
aa.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
cc.innerHTML = "Aan";
} else {
cc.innerHTML = "Uit";
}
if (event.getModifierState("NumLock")) {
nn.innerHTML = "Aan";
} else {
nn.innerHTML = "Uit";
}
if (event.getModifierState("ScrollLock")) {
ss.innerHTML = "Aan";
} else {
ss.innerHTML = "Uit";
}
})
</script>
Bron: w3schools.com
