Element: copy Ereignis

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

Es ist möglich, ein synthetisches copy Ereignis zu erstellen und auszulösen, aber dies wird keine Auswirkung auf die System-Zwischenablage haben.

Dieses Ereignis bubbelt, ist stornierbar und ist zusammengesetzt.

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

oncopy = (event) => {};

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

const source = document.querySelector("div.source");

source.addEventListener("copy", (event) => {
  const selection = document.getSelection();
  event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
  event.preventDefault();
});