Signatur
Beschreibung
Die schreibgeschützte Eigenschaft shiftKey eines KeyboardEvent ist true, wenn die Umschalttaste (links oder rechts) gedrückt war, als das Ereignis ausgelöst wurde, sonst false.
Typische Einsatzfälle sind Tastenkombinationen (z. B. Strg+Shift+S für „Speichern unter“), umgekehrte Navigation (Shift+Tab für eine Fokusfalle in modalen Dialogen) oder Varianten einer Aktion wie Shift+Enter für einen Zeilenumbruch statt Absenden in einem Chatfeld.
Die Eigenschaft wird an MouseEvent und TouchEvent in gleicher Form vererbt bzw. angeboten. Für Tastaturereignisse spiegelt sie den Zustand zum Zeitpunkt des Ereignisses wider – beim keydown der Shift-Taste selbst ist sie bereits true, beim zugehörigen keyup bereits false.
Alternativ lässt sich der Zustand über event.getModifierState("Shift") abfragen, das zusätzlich weitere Modifikatoren wie "CapsLock" unterstützt.
Rückgabewert
true, wenn eine Shift-Taste beim Auslösen des Ereignisses gedrückt war, sonst false.Beispiele
Shift+Enter im Chatfeld: Zeilenumbruch statt Absenden
const textarea = document.querySelector('#nachricht');
textarea.addEventListener('keydown', (event) => {
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault(); // kein Zeilenumbruch
console.log('Nachricht gesendet:', textarea.value);
textarea.value = '';
}
// Shift+Enter: Standardverhalten (Zeilenumbruch) bleibt erhalten
});
Tastenkürzel Strg+Shift+S für „Speichern unter“
document.addEventListener('keydown', (event) => {
const strg = event.ctrlKey || event.metaKey; // metaKey für macOS
if (strg && event.shiftKey && event.code === 'KeyS') {
event.preventDefault();
console.log('Speichern unter …');
} else if (strg && event.code === 'KeyS') {
event.preventDefault();
console.log('Speichern');
}
});
Fokusfalle in einem modalen Dialog (Tab / Shift+Tab)
const dialog = document.querySelector('#dialog');
dialog.addEventListener('keydown', (event) => {
if (event.key !== 'Tab') return;
const fokussierbar = dialog.querySelectorAll('button, [href], input, select, textarea');
const erstes = fokussierbar[0];
const letztes = fokussierbar[fokussierbar.length - 1];
if (event.shiftKey && document.activeElement === erstes) {
event.preventDefault();
letztes.focus(); // rückwärts: vom ersten zum letzten springen
} else if (!event.shiftKey && document.activeElement === letztes) {
event.preventDefault();
erstes.focus();
}
});
Synthetisches Ereignis mit gesetztem shiftKey
const event = new KeyboardEvent('keydown', { key: 'A', code: 'KeyA', shiftKey: true });
console.log(event.shiftKey);
event.shiftKey = false; // schreibgeschützt, wird ignoriert
console.log(event.shiftKey);
// Wichtig · Fallstricke
- Schreibgeschützt: Zuweisungen werden stillschweigend ignoriert (im Strict Mode kein Fehler, da Getter ohne Setter auf dem Prototyp – tatsächlich wird ein
TypeErrorim Strict Mode nur bei eigenen Eigenschaften geworfen). Für Tests den Wert über das Initialisierungsobjekt vonnew KeyboardEvent()setzen. - Feststelltaste (CapsLock) zählt nicht: Bei aktivem CapsLock ist
shiftKeyfalse, obwohl Großbuchstaben erscheinen. DafürgetModifierState('CapsLock')verwenden. event.keyist bereits verändert: Mit gedrückter Shift-Taste liefertkeyz. B."A"statt"a"oder"!"statt"1"(layoutabhängig). Für layoutunabhängige Kürzel besserevent.code(z. B."KeyS") prüfen.- Links und rechts werden nicht unterschieden; dafür
event.code("ShiftLeft"/"ShiftRight") oderevent.locationauswerten. - Manche Kombinationen (z. B. Strg+Shift+N, Strg+Shift+T) sind vom Browser reserviert und lassen sich mit
preventDefault()nicht abfangen. - Kompatibilität: in allen modernen Browsern seit Langem unterstützt.