Element: cut — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("cut", handler)

Beschreibung

Das cut-Ereignis gehört zur Clipboard API. Es wird am Element mit dem Fokus ausgelöst, bei einer Auswahl im normalen Dokument also am Element, das die Auswahl enthält. Danach steigt es im DOM nach oben (bubbles) und überschreitet dabei auch Shadow-DOM-Grenzen (composed). Das Ereignisobjekt ist ein ClipboardEvent. Über dessen Eigenschaft clipboardData (ein DataTransfer-Objekt) lässt sich festlegen, welche Daten in der Zwischenablage landen.

Standardmäßig kopiert der Browser die aktuelle Auswahl in die Zwischenablage und entfernt sie bei bearbeitbaren Inhalten (<input>, <textarea>, contenteditable) aus dem Dokument. Mit event.preventDefault() unterdrückt man dieses Verhalten vollständig. Dann muss man die Daten selbst per clipboardData.setData() setzen und die Auswahl bei Bedarf selbst aus dem Dokument löschen.

Typische Einsatzfälle sind: Text vor dem Ausschneiden umformatieren (z. B. Formatierung entfernen oder eine Quellenangabe anhängen), zusätzliche Formate wie text/html bereitstellen, Ausschneiden in bestimmten Feldern verhindern oder Undo-Verläufe in eigenen Editoren pflegen.

Das Ereignis lässt sich mit addEventListener("cut", …) oder über die Eigenschaft oncut registrieren. Es steht an Element, Document und Window zur Verfügung.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, hier `"cut"`.
$handler Pflicht	(event: ClipboardEvent) => void		Callback-Funktion, die ein `ClipboardEvent` erhält. Wichtige Eigenschaft: `event.clipboardData` (`DataTransfer`).
$options	boolean \| AddEventListenerOptions	false	Optionen wie `capture`, `once`, `passive` oder `signal`. Bei `passive: true` wirkt `preventDefault()` nicht.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein ClipboardEvent, das abbrechbar (cancelable) ist, im DOM aufsteigt (bubbles) und Shadow-DOM-Grenzen überschreitet (composed).

Beispiele

Ausgeschnittenen Text in Großbuchstaben ablegen (contenteditable)

// HTML: <div id="editor" contenteditable="true">Hallo Welt</div>
const editor = document.querySelector('#editor');

editor.addEventListener('cut', (event) => {
  const selection = document.getSelection();
  if (!selection || selection.isCollapsed) return;

  // Eigene Daten in die Zwischenablage schreiben
  event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
  event.preventDefault();

  // Nach preventDefault() muss die Auswahl selbst entfernt werden
  selection.deleteFromDocument();
  console.log('Ausgeschnitten und umgewandelt');
});

Ausgeschnitten und umgewandelt

Ausschneiden in einem Passwortfeld über oncut verhindern

// HTML: <input type="text" id="iban" value="DE89370400440532013000">
const ibanField = document.querySelector('#iban');

ibanField.oncut = (event) => {
  event.preventDefault();
  console.warn('Ausschneiden ist in diesem Feld deaktiviert.');
};

// Später wieder erlauben:
// ibanField.oncut = null;

Ausschneiden ist in diesem Feld deaktiviert.

Nur Klartext ohne Formatierung + Aufräumen mit removeEventListener

const article = document.querySelector('article[contenteditable]');

const handleCut = (event) => {
  const selection = document.getSelection();
  const text = selection.toString();
  event.clipboardData.setData('text/plain', text);
  event.clipboardData.setData('text/html', `<p>${text.replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' })[c])}</p>`);
  event.preventDefault();
  selection.deleteFromDocument();
  console.log(`${text.length} Zeichen ausgeschnitten`);
};

article.addEventListener('cut', handleCut);

// Beim Verlassen des Editors Listener wieder entfernen
const closeEditor = () => article.removeEventListener('cut', handleCut);

12 Zeichen ausgeschnitten

Zentrales Logging per Event-Delegation am Dokument

document.addEventListener('cut', (event) => {
  const target = event.target;
  const label = target.id || target.tagName.toLowerCase();
  console.log(`cut in: ${label}`);
  // kein preventDefault → Standardverhalten bleibt erhalten
});

cut in: kommentar

// Wichtig · Fallstricke

preventDefault entfernt nichts: Nach event.preventDefault() löscht der Browser weder die Auswahl, noch kopiert er Daten. Beides muss man selbst erledigen (setData() und selection.deleteFromDocument()). Bei <input>/<textarea> hilft setRangeText(''), denn document.getSelection() liefert dort keinen verlässlichen Text. Den markierten Text liest man über selectionStart/selectionEnd aus.
Kein Lesezugriff: Im cut-Handler ist clipboardData.getData() leer. Man kann nur schreiben. Zum Lesen gibt es das paste-Ereignis.
Nicht bearbeitbare Inhalte: Das Ereignis wird auch bei nicht editierbarem Text ausgelöst. Der Standard-Ausschnitt entfernt dort aber nichts.
Synthetische Ereignisse: Ein per dispatchEvent(new ClipboardEvent('cut')) erzeugtes Ereignis greift nicht auf die echte Zwischenablage zu. document.execCommand('cut') ist veraltet (deprecated). Für programmatischen Zugriff empfiehlt sich navigator.clipboard.writeText() (sicherer Kontext, Benutzergeste nötig).
Barrierefreiheit/UX: Ausschneiden global zu blockieren, stört Nutzer und Passwort-Manager. Das sollte man nur gezielt einsetzen.
Sicherheit: Wer mit setData('text/html', …) Benutzertext in HTML einbettet, sollte ihn escapen. Sonst kann beim Einfügen in andere Anwendungen fremdes Markup entstehen.
Kompatibilität: Wird in allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari). composed und das Verhalten in Shadow DOM können sich zwischen älteren Versionen unterscheiden.

Siehe auch

Element: blur Element: copy Element: focus Element: input Element: click