Element: cut Ereignis

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

Wenn der Benutzer versucht, eine Ausschneideaktion auf nicht editierbarem Inhalt durchzufü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 Zwischenablage des Systems zu kopieren und aus dem Dokument zu entfernen.

Ein Handler für dieses Ereignis kann den Inhalt der Zwischenablage modifizieren, 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. Daher muss ein Ereignishandler, der die Standardaktion für "Ausschneiden" nachahmen möchte, während er die Zwischenablage modifiziert, auch manuell die Auswahl aus dem Dokument entfernen.

Der Handler kann die Daten der Zwischenablage nicht lesen.

Es ist möglich, ein synthetisches cut Ereignis zu konstruieren und auszulösen, aber dies hat keine Auswirkungen auf die System-Zwischenablage oder den Inhalt des Dokuments.

Dieses Ereignis bubbles, ist cancelable und ist composed.

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

oncut = (event) => {};

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

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