HTMLElement: 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 March 2017.

Das copy-Ereignis wird ausgelöst, wenn der Benutzer eine Kopieraktion über die Benutzeroberfläche des Browsers initiiert.

Syntax

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

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

oncopy = (event) => {};

Ereignistyp

Ereigniseigenschaften

Erbt auch Eigenschaften von seinem übergeordneten Event.

ClipboardEvent.clipboardData Nur lesbar

Ein DataTransfer-Objekt, das die von der vom Benutzer initiierten cut-, copy- oder paste-Operation betroffenen Daten sowie ihren MIME-Typ enthält.

Beispiel

Dieses Beispiel blockiert jeden Kopier- und Einfügeversuch innerhalb des <textarea>.

HTML

html
<h3>Play with this text area:</h3>
<textarea id="editor" rows="3">
Try copying and pasting text into this field!
</textarea>

<h3>Log:</h3>
<p id="log"></p>

JavaScript

js
const log = document.getElementById("log");

function logCopy(event) {
  log.innerText = `Copy blocked!\n${log.innerText}`;
  event.preventDefault();
}

function logPaste(event) {
  log.innerText = `Paste blocked!\n${log.innerText}`;
  event.preventDefault();
}

const editor = document.getElementById("editor");

editor.oncopy = logCopy;
editor.onpaste = logPaste;

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

  • Verwandte Ereignisse