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 July 2015.
Das cut-Ereignis der Zwischenablage-API wird ausgelöst, wenn der Benutzer eine "Ausschneiden"-Aktion über die Benutzeroberfläche des Browsers initiiert hat.
Wenn der Benutzer versucht, eine Ausschneideaktion auf nicht bearbeitbarem Inhalt auszuführen, wird das cut-Ereignis trotzdem 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 aus dem Dokument zu entfernen.
Ein Handler für dieses Ereignis kann die Zwischenablage-Inhalte ändern, indem er setData(format, data) auf der ClipboardEvent.clipboardData-Eigenschaft des Ereignisses aufruft und die Standardaktion mit event.preventDefault() verhindert.
Beachten Sie jedoch, dass das Abbrechen der Standardaktion auch verhindert, dass das Dokument aktualisiert wird. Ein Ereignishandler, der die Standardaktion für "Ausschneiden" emulieren und gleichzeitig die Zwischenablage ändern möchte, muss die Auswahl daher auch manuell aus dem Dokument entfernen.
Der Handler kann die Zwischenablage-Daten nicht lesen.
Es ist möglich, ein synthetisches cut-Ereignis zu konstruieren und zu versenden, aber dies wird weder die Systemzwischenablage noch den Dokumentinhalt beeinflussen.
Dieses Ereignis blubbert, ist abbruchsbereit und ist zusammengesetzt.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("cut", (event) => { })
oncut = (event) => { }
Ereignistyp
Ein ClipboardEvent. Erbt von Event.
Beispiele
Live-Beispiel
HTML
<div class="source" contenteditable="true">Cut text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div>
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();
});
Ergebnis
Spezifikationen
| Specification |
|---|
| Clipboard API and events # clipboard-event-cut |
| HTML # handler-oncut |