Element: copy event

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.

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 Ereignishandler 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 die Daten der Zwischenablage lesen.

Es ist möglich, ein synthetisches copy-Ereignis zu erstellen und auszulösen, dies wirkt sich jedoch nicht auf die System-Zwischenablage aus.

Dieses Ereignis blubbert die DOM-Baumstruktur hoch, schließlich bis zu Document und Window, es ist abbrechbar und ist komponiert.

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