Signatur
Beschreibung
getModifierState() fragt den Zustand einer bestimmten Modifikatortaste zum Zeitpunkt des Tastaturereignisses ab. Die Methode liefert true, wenn der Modifikator aktiv ist – also gedrückt (bei Shift, Control, Alt, Meta) oder eingerastet (bei CapsLock, NumLock, ScrollLock).
Die Eigenschaften shiftKey, ctrlKey, altKey und metaKey decken nur die vier klassischen Modifikatoren ab. Mit getModifierState() kommt man zusätzlich an Einrast-Tasten und spezielle Modifikatoren wie AltGraph oder Fn. Typisch ist die Warnung „Feststelltaste aktiv“ in Passwortfeldern.
Die Methode gibt es nicht nur auf KeyboardEvent, sondern auch auf MouseEvent, PointerEvent, WheelEvent und TouchEvent. So lässt sich etwa bei einem Klick prüfen, ob die Feststelltaste eingerastet ist.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $key Pflicht | string | Name des Modifikators, Groß-/Kleinschreibung beachten. Gültige Werte: "Alt", "AltGraph", "CapsLock", "Control", "Fn", "FnLock", "Hyper", "Meta", "NumLock", "ScrollLock", "Shift", "Super", "Symbol", "SymbolLock". |
Rückgabewert
true, wenn der Modifikator aktiv (gedrückt oder eingerastet) ist, sonst false. Bei unbekannten oder falsch geschriebenen Namen kommt ebenfalls false zurück.Beispiele
Feststelltasten-Warnung im Passwortfeld
const passwort = document.querySelector('#passwort');
const hinweis = document.querySelector('#capslock-hinweis');
const pruefeCapsLock = (event) => {
const aktiv = event.getModifierState('CapsLock');
hinweis.hidden = !aktiv;
};
passwort.addEventListener('keydown', pruefeCapsLock);
passwort.addEventListener('keyup', pruefeCapsLock);Alle Modifikatoren eines Tastendrucks protokollieren
const modifikatoren = ['Shift', 'Control', 'Alt', 'AltGraph', 'Meta', 'CapsLock', 'NumLock'];
document.addEventListener('keydown', (event) => {
const aktiv = modifikatoren.filter((m) => event.getModifierState(m));
console.log(`Taste: ${event.key}, Modifikatoren: ${aktiv.join(', ') || 'keine'}`);
});Tastenkürzel Strg/Cmd + S abfangen
document.addEventListener('keydown', (event) => {
const istMac = navigator.platform.toUpperCase().includes('MAC');
const hauptModifikator = istMac ? 'Meta' : 'Control';
if (event.getModifierState(hauptModifikator) && event.key.toLowerCase() === 's') {
event.preventDefault();
console.log('Dokument wird gespeichert …');
}
});Modifikator bei einem Mausklick abfragen
document.querySelector('#liste').addEventListener('click', (event) => {
if (event.getModifierState('Shift')) {
console.log('Bereichsauswahl');
} else {
console.log('Einzelauswahl');
}
});// Wichtig · Fallstricke
- Groß-/Kleinschreibung:
getModifierState('capslock')oder'Ctrl'liefern stetsfalse, ohne Fehlermeldung. Richtig sind'CapsLock'und'Control'. - AltGr unter Windows: AltGr wird oft als
Control+Altgemeldet. Wer Tastenkürzel wie Strg+Alt+X nutzt, kann auf deutschen Tastaturen versehentlich Eingaben wie@oder€abfangen. - Zeitpunkt beim Umschalten: Beim
keydownder Feststelltaste selbst geben Browser den Zustand unterschiedlich an – mal den Zustand vor dem Umschalten, mal den danach. Deshalb am besten zusätzlichkeyupoder den nächsten normalen Tastendruck prüfen. - Plattformen:
Fn,Hyper,SuperundSymbolwerden nur teilweise unterstützt; auf macOS istNumLockmeist nicht verfügbar. Auf Mobilgeräten mit Bildschirmtastatur sind die Werte oft unzuverlässig. - Kompatibilität: Wird von allen aktuellen Browsern unterstützt. Ältere Versionen von Safari und Internet Explorer kannten nicht alle Modifikatornamen.