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 July 2015.

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 es, 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.

Jedoch kann der Handler die Daten der Zwischenablage nicht lesen.

Es ist möglich, ein synthetisches copy Ereignis zu konstruieren und auszulösen, aber dies wird die System-Zwischenablage nicht beeinflussen.

Dieses Ereignis blubbert den DOM-Baum hinauf, schließlich zum Document und Window, ist abbruchsicher 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();
});

Ergebnis

Spezifikationen

Specification
Clipboard API and events # clipboard-event-copy
HTML # handler-oncopy

Browser-Kompatibilität

Siehe auch

cut Ereignis
paste Ereignis