Element: copy Ereignis
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.
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 modifizieren, indem er setData(format, data) auf der ClipboardEvent.clipboardData-Eigenschaft des Ereignisses aufruft und die Standardaktion des Ereignisses mit event.preventDefault() abbricht.
Der Handler kann jedoch die Daten der Zwischenablage nicht lesen.
Es ist möglich, ein synthetisches copy Ereignis zu erstellen und auszulösen, aber dies wird die System-Zwischenablage nicht beeinflussen.
Dieses Ereignis bubbelt, ist folgerbar und ist komponiert.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("copy", (event) => {});
oncopy = (event) => {};
Ereignistyp
Ein ClipboardEvent. Erbt von Event.
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 Standard # handler-oncopy |
Browser-Kompatibilität
BCD tables only load in the browser