Element: copy-Ereignis

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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 ist das Kopieren der Auswahl (falls vorhanden) in die Zwischenablage.

Ein Handler für dieses Ereignis kann den Inhalt der Zwischenablage ändern, indem er setData(format, data) auf die 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 konstruieren und zu dispatchen, aber dies beeinflusst nicht die Systemzwischenablage.

Dieses Ereignis bubblet den DOM-Baum hinauf, schließlich bis zum Document und Window, ist cancelable und ist composed.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

addEventListener("copy", (event) => { })

oncopy = (event) => { }

HTML

html

<div class="source" contenteditable="true">Copy text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div>

div.source,
div.target {
  border: 1px solid gray;
  margin: 0.5rem;
  padding: 0.5rem;
  height: 1rem;
  background-color: #e9eef1;
}

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();
});