Element: cut-Ereignis

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das cut-Ereignis der Clipboard API wird ausgelöst, wenn ein Benutzer über die Benutzeroberfläche des Browsers eine Ausschneiden-Aktion auslöst.

Wenn ein Benutzer versucht, nicht bearbeitbare Inhalte auszuschneiden, wird das cut-Ereignis ebenfalls ausgelöst, das Ereignisobjekt enthält jedoch keine Daten.

Die Standardaktion des Ereignisses besteht darin, die aktuelle Auswahl (falls vorhanden) in die Zwischenablage des Systems zu kopieren und sie aus dem Dokument zu entfernen.

Ein Handler für dieses Ereignis kann den Inhalt der Zwischenablage ändern, indem er setData(format, data) für die Eigenschaft ClipboardEvent.clipboardData des Ereignisses aufruft und die Standardaktion mit event.preventDefault() verhindert.

Beachten Sie jedoch, dass dadurch auch die Aktualisierung des Dokuments verhindert wird. Ein Ereignis-Handler, der die Standardaktion für das Ausschneiden nachbilden und zugleich den Inhalt der Zwischenablage ändern möchte, muss die Auswahl daher auch manuell aus dem Dokument entfernen.

Der Handler kann die Daten der Zwischenablage nicht lesen.

Es ist möglich, ein synthetisches cut-Ereignis zu erstellen und auszulösen. Dies wirkt sich jedoch weder auf die Zwischenablage des Systems noch auf den Inhalt des Dokuments aus.

Dieses Ereignis steigt im DOM-Baum auf, bis es schließlich Document und Window erreicht. Es ist abbrechbar und composed.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

addEventListener("cut", (event) => { })

Alternativ können Sie ihn der Ereignis-Handler-Eigenschaft der Schnittstelle zuweisen:

oncut = (event) => { }

HTML

html

<div class="source" contenteditable="true">Cut text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div>

div.source,
div.target {
  border: 1px solid gray;
  margin: 0.5rem;
  padding: 0.5rem;
  height: 1rem;
  background-color: #e9eef1;
}

JavaScript

const source = document.querySelector("div.source");

source.addEventListener("cut", (event) => {
  const selection = document.getSelection();
  event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
  selection.deleteFromDocument();
  event.preventDefault();
});