SVGGraphicsElement: copy event
The copy
event fires on SVGGraphicsElements
when the user initiates a copy action through the browser's user interface.
Bubbles | Yes |
---|---|
Cancelable | Yes |
Interface | ClipboardEvent |
Event handler property | oncopy |
The event's default action is to copy the selection (if any) to the clipboard.
A handler for this event can modify the clipboard contents by calling setData(format, data)
on the event's ClipboardEvent.clipboardData
property, and cancelling the event's default action using event.preventDefault()
.
However, the handler cannot read the clipboard data.
It's possible to construct and dispatch a synthetic copy
event, but this will not affect the system clipboard.
Example
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.getElementsByTagName("text")[0].addEventListener("copy", evt => {
evt.clipboardData.setData('text/plain', document.getSelection().toString().toUpperCase());
evt.preventDefault();
});
Result
Specifications
No specification found
No specification data found for api.SVGGraphicsElement.copy_event
.
Check for problems with this page or contribute a missing spec_url
to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.
Browser compatibility
No compatibility data found for api.SVGGraphicsElement.copy_event
.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.