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.

Mehr erfahren
Vollständige Kompatibilität anzeigen

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

Wenn der Benutzer versucht, eine Ausschneideaktion auf nicht editierbaren Inhalt auszuführen, wird das cut-Ereignis dennoch ausgelöst, aber das Ereignisobjekt enthält keine Daten.

Die Standardaktion des Ereignisses besteht darin, die aktuelle Auswahl (falls vorhanden) in die Systemzwischenablage 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) auf der ClipboardEvent.clipboardData-Eigenschaft des Ereignisses aufruft und die Standardaktion mit event.preventDefault() abbricht.

Beachten Sie jedoch, dass das Abbrechen der Standardaktion auch verhindert, dass das Dokument aktualisiert wird. Ein Ereignishandler, der die Standardaktion zum "Ausschneiden" emulieren und gleichzeitig die Zwischenablage ändern möchte, muss die Auswahl 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 zu versenden, aber dies hat keinen Einfluss auf die Systemzwischenablage oder den Inhalt des Dokuments.

Dieses Ereignis blubbert den DOM-Baum hinauf, schließlich zu Document und Window, es ist abbrechbar und ist zusammengesetzt.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

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

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();
});