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 ⁨Juli 2015⁩.

Dascopy-Ereignis derClipboard 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 kannden Inhalt der Zwischenablage ändern, indem ersetData(format, data) auf derClipboardEvent.clipboardData-Eigenschaft des Ereignisses aufruft und die Standardaktion des Ereignisses mitevent.preventDefault() verhindert.

Der Handler kann jedochnicht die Daten der Zwischenablage lesen.

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

Dieses Ereignisblubbert die DOM-Baumstruktur hoch, schließlich bis zuDocument undWindow, es istabbrechbar und istkomponiert.

Syntax

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

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

HTML

html

<div contenteditable="true">Copy text from this box.</div><div 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();});