Signatur
Beschreibung
Mit getModifierState() fragen Sie ab, ob beim Auslösen eines MouseEvent (also auch bei PointerEvent, WheelEvent und DragEvent) eine bestimmte Modifikatortaste gedrückt oder eingerastet war. „Aktiv“ heißt: Die Taste wurde gedrückt gehalten (Shift, Control, Alt, Meta) oder ist als Sperrtaste eingeschaltet (CapsLock, NumLock, ScrollLock).
Die Eigenschaften shiftKey, ctrlKey, altKey und metaKey decken nur vier Tasten ab. getModifierState() geht darüber hinaus: Sie fragt damit auch Sperrtasten, AltGraph (wichtig bei deutschen Tastaturen) oder Fn ab. So erkennen Sie etwa beim Klick in ein Passwortfeld, ob die Feststelltaste eingeschaltet ist.
Die Methode gibt es genauso bei KeyboardEvent. Groß- und Kleinschreibung zählen: Der Schlüssel muss exakt so geschrieben werden, wie ihn die Spezifikation UI Events KeyboardEvent key Values festlegt, z. B. "Control" und nicht "ctrl".
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $key Pflicht | string | Name der Modifikatortaste, Groß-/Kleinschreibung beachten. Gültige Werte: "Alt", "AltGraph", "CapsLock", "Control", "Fn", "FnLock", "Hyper", "Meta", "NumLock", "ScrollLock", "Shift", "Super", "Symbol", "SymbolLock". Unbekannte Werte liefern false. |
Beispiele
Mehrfachauswahl mit Strg/Cmd und Shift
const list = document.querySelector('#dateiliste');
list.addEventListener('click', (event) => {
const item = event.target.closest('li');
if (!item) return;
// Cmd auf macOS, Strg auf anderen Systemen
const toggle = event.getModifierState('Control') || event.getModifierState('Meta');
const range = event.getModifierState('Shift');
if (range) {
console.log('Bereichsauswahl bis', item.textContent);
} else if (toggle) {
item.classList.toggle('selected');
console.log('Auswahl umgeschaltet:', item.textContent);
} else {
list.querySelectorAll('.selected').forEach((el) => el.classList.remove('selected'));
item.classList.add('selected');
console.log('Einzelauswahl:', item.textContent);
}
});Warnung bei eingeschalteter Feststelltaste
const password = document.querySelector('#passwort');
const hint = document.querySelector('#capslock-hinweis');
const checkCapsLock = (event) => {
const active = event.getModifierState('CapsLock');
hint.hidden = !active;
console.log('CapsLock aktiv:', active);
};
// Funktioniert bei Maus- und Tastatur-Events gleichermaßen
password.addEventListener('mousedown', checkCapsLock);
password.addEventListener('keyup', checkCapsLock);Zoom mit Strg + Mausrad (WheelEvent)
const canvas = document.querySelector('#karte');
let zoom = 1;
canvas.addEventListener('wheel', (event) => {
if (!event.getModifierState('Control')) return; // normales Scrollen erlauben
event.preventDefault();
zoom = Math.min(5, Math.max(0.2, zoom - event.deltaY * 0.001));
canvas.style.transform = `scale(${zoom})`;
console.log('Zoom:', zoom.toFixed(2));
}, { passive: false });// Wichtig · Fallstricke
- Groß-/Kleinschreibung:
getModifierState('shift')oder'Ctrl'geben immerfalsezurück, und zwar ohne Fehlermeldung. Schreiben Sie also exakt'Shift'bzw.'Control'. - AltGr unter Windows: Die Taste AltGr wird oft als
Control+Altgemeldet. Wenn Sie auf'AltGraph'prüfen, vermeiden Sie falsch erkannte Tastenkürzel. - Plattformunterschiede: Auf macOS ersetzt
Meta(Cmd) meistControl. Außerdem öffnet Strg+Klick dort das Kontextmenü. Auf Linux mit Chrome ist Firefox beiNumLockbzw.ScrollLockteils unzuverlässig.Fn,Hyper,SuperundSymbolwerden nur vereinzelt unterstützt. - Zeitpunkt: Die Methode liefert den Zustand zum Zeitpunkt des Events, nicht den aktuellen Zustand. Werten Sie ein gespeichertes Event später aus, kann der Wert veraltet sein.
- Für die vier Standardtasten sind
event.shiftKey,ctrlKey,altKeyundmetaKeygleichwertig und etwas kürzer.