SVGGraphicsElement: 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 auf SVGGraphicsElements 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 ändern, 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 die Daten der Zwischenablage nicht lesen.
Es ist möglich, ein synthetisches copy-Ereignis zu konstruieren und auszulösen, aber dies wird die Systemzwischenablage nicht beeinflussen.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Event-Handler-Eigenschaft.
addEventListener("copy", (event) => {});
oncopy = (event) => {};
Ereignistyp
Ein ClipboardEvent. Erbt von Event.
Beispiel
HTML
<?xml version="1.0" encoding="UTF-8"?>
<svg
viewBox="0 0 100 30"
width="600"
height="320"
xmlns="http://www.w3.org/2000/svg">
<text x="5" y="10" id="text-to-copy">Copy this text</text>
<foreignObject x="5" y="20" width="90" height="20">
<input xmlns="http://www.w3.org/1999/xhtml" placeholder="Paste it here" />
</foreignObject>
</svg>
CSS
input {
font-size: 10px;
width: 100%;
height: 90%;
box-sizing: border-box;
border: 1px solid black;
}
JavaScript
document.querySelector("text").addEventListener("copy", (evt) => {
evt.clipboardData.setData(
"text/plain",
document.getSelection().toString().toUpperCase(),
);
evt.preventDefault();
});
Ergebnis
Spezifikationen
| Specification |
|---|
| Clipboard API and events # clipboard-event-copy |
| HTML # handler-oncopy |
Browser-Kompatibilität
BCD tables only load in the browser