SVGGraphicsElement: copy-Ereignis
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 wird bei SVGGraphicsElements ausgelöst, wenn der Benutzer über die Benutzeroberfläche des Browsers eine Kopieraktion startet.
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() verhindert.
Der Handler kann jedoch die Daten in der Zwischenablage nicht lesen.
Es ist möglich, ein synthetisches copy-Ereignis zu erstellen und auszulösen, dies hat jedoch keine Auswirkungen auf die System-Zwischenablage.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-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 |