Element: copy 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 copy-Ereignis der Clipboard API wird ausgelöst, wenn der Benutzer eine Kopieraktion über die Benutzeroberfläche des Browsers initiiert.
Die Standardaktion des Ereignisses besteht darin, die Auswahl (falls vorhanden) in die Zwischenablage zu kopieren.
Ein Handler für dieses Ereignis kann den Inhalt der Zwischenablage ändern, indem er setData(format, data) auf der ClipboardEvent.clipboardData-Eigenschaft des Ereignisses aufruft und die Standardaktion des Ereignisses mit event.preventDefault() verhindert.
Der Handler kann jedoch nicht auf die Daten der Zwischenablage zugreifen.
Es ist möglich, ein synthetisches copy-Ereignis zu erstellen und auszulösen, aber dies wird die Systemzwischenablage nicht beeinflussen.
Dieses Ereignis bubbelt, ist abbrechbar und ist komponiert.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignisbehandlungseigenschaft.
addEventListener("copy", (event) => { })
oncopy = (event) => { }
Ereignistyp
Ein ClipboardEvent, das von Event erbt.
Beispiele
Live-Beispiel
HTML
<div class="source" contenteditable="true">Copy 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("copy", (event) => {
const selection = document.getSelection();
event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
event.preventDefault();
});
Ergebnis
Spezifikationen
| Specification |
|---|
| Clipboard API and events # clipboard-event-copy |
| HTML # handler-oncopy |