Element: cut event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

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

Falls der Benutzer versucht, eine Ausschneideaktion auf nicht editierbaren Inhalten durchzuführen, wird dascut-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 Zwischenablagemodifizieren, indem ersetData(format, data) auf derClipboardEvent.clipboardData-Eigenschaft des Ereignisses aufruft und die Standardaktion mitevent.preventDefault() verhindert.

Beachten Sie jedoch, dass das Verhindern der Standardaktion auch verhindert, dass das Dokument aktualisiert wird. Ein Ereignishandler, der die Standardaktion für "Ausschneiden" nachahmen möchte, während er die Zwischenablage modifiziert, muss auch manuell die Auswahl aus dem Dokument entfernen.

Der Handler kann die Daten der Zwischenablage nichtlesen.

Es ist möglich, einsynthetischescut-Ereignis zu konstruieren und auszulösen, aber dies wird weder die System-Zwischenablage noch den Inhalt des Dokuments beeinflussen.

Dieses Ereignisbubbelt den DOM-Baum nach oben, schließlich zumDocument undWindow, istabbrechbar und istzusammengesetzt.

Syntax

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

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

HTML

html

<div contenteditable="true">Cut text from this box.</div><div 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();});