Start · Sprachen · JavaScript · Referenz · KeyboardEvent.shiftKey

KeyboardEvent.shiftKey

Eigenschaft

Schreibgeschützter boolescher Wert, der angibt, ob die Umschalttaste (Shift) beim Auslösen des Tastaturereignisses gedrückt war.

seit JavaScript Baseline: alle Browser Kategorie: webapi

Signatur

KeyboardEvent.shiftKey

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

Typ
boolean
Beschreibung
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
});
Nachricht gesendet: Hallo Welt

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');
  }
});
Speichern unter …

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);
true true

// Wichtig · Fallstricke

  • Schreibgeschützt: Zuweisungen werden stillschweigend ignoriert (im Strict Mode kein Fehler, da Getter ohne Setter auf dem Prototyp – tatsächlich wird ein TypeError im Strict Mode nur bei eigenen Eigenschaften geworfen). Für Tests den Wert über das Initialisierungsobjekt von new KeyboardEvent() setzen.
  • Feststelltaste (CapsLock) zählt nicht: Bei aktivem CapsLock ist shiftKey false, obwohl Großbuchstaben erscheinen. Dafür getModifierState('CapsLock') verwenden.
  • event.key ist bereits verändert: Mit gedrückter Shift-Taste liefert key z. B. "A" statt "a" oder "!" statt "1" (layoutabhängig). Für layoutunabhängige Kürzel besser event.code (z. B. "KeyS") prüfen.
  • Links und rechts werden nicht unterschieden; dafür event.code ("ShiftLeft"/"ShiftRight") oder event.location auswerten.
  • 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.