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
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 | Candidate Recommendation | Definition that the clipboard events apply to SVG elements. |
Clipboard API and events | Working Draft | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
No compatibility data found. Please contribute data for "api.SVGGraphicsElement.copy_event" (depth: 1) to the MDN compatibility data repository.