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 eine Person über die Benutzeroberfläche des Browsers einen Kopiervorgang startet.

Die Standardaktion des Ereignisses besteht darin, die Auswahl (sofern vorhanden) in die Zwischenablage zu kopieren.

Ein Handler für dieses Ereignis kann den Inhalt der Zwischenablage ändern, indem er setData(format, data) für die Eigenschaft ClipboardEvent.clipboardData des Ereignisses aufruft und die Standardaktion mit event.preventDefault() verhindert.

Der Handler kann die Daten aus der Zwischenablage jedoch nicht lesen.

Es ist möglich, ein synthetisches copy-Ereignis zu erzeugen und auszulösen. Dies wirkt sich jedoch nicht auf die Systemzwischenablage aus.

Dieses Ereignis steigt im DOM-Baum auf, schließlich bis zu Document und Window. Es ist abbrechbar und composed.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:

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