Element: cut-Ereignis
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 Clipboard API wird ausgelöst, wenn der Benutzer eine "Ausschneiden"-Aktion über die Benutzeroberfläche des Browsers initiiert hat.
Wenn der Benutzer versucht, eine Ausschneiden-Aktion auf nicht editierbarem Inhalt durchzufü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 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. Ein Ereignishandler, der die Standardaktion für "Ausschneiden" emulieren und gleichzeitig die Zwischenablage modifizieren möchte, muss 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 erstellen und auszulösen, aber dies wird weder die Zwischenablage des Systems noch die Inhalte des Dokuments beeinflussen.
Dieses Ereignis blubbert die DOM-Baumstruktur hoch, bis zu Document und Window, ist abbruchsbereit und zusammengesetzt.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-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 |