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 Clipboard API wird ausgelöst, wenn der Benutzer eine "Ausschneiden"-Aktion über die Benutzeroberfläche des Browsers initiiert hat.
Wenn der Benutzer versucht, eine Ausschneide-Aktion auf nicht editierbaren Inhalten 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 Zwischenablage des Systems zu kopieren und aus dem Dokument zu entfernen.
Ein Handler für dieses Ereignis kann die Inhalte 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" nachahmen möchte, während er die Zwischenablage modifiziert, 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 konstruieren und auszulösen, aber dies wird weder die Zwischenablage noch die Inhalte des Dokuments beeinflussen.
Dieses Ereignis blubbert den DOM-Baum hinauf, letztendlich bis zu Document und Window, ist stornierbar und ist 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 |