SVGGraphicsElement: paste 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.
The paste
event is fired on an SVGGraphicsElement
when the user has initiated a "paste" action through the browser's user interface.
If the cursor is in an editable context (for example, in a <textarea>
or an element with contenteditable
attribute set to true
) then the default action is to insert the contents of the clipboard into the document at the cursor position.
A handler for this event can access the clipboard contents by calling getData()
on the event's clipboardData
property.
To override the default behavior (for example to insert some different data or a transformation of the clipboard contents) an event handler must cancel the default action using event.preventDefault()
, and then insert its desired data manually.
It's possible to construct and dispatch a synthetic paste
event, but this will not affect the document's contents.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("paste", (event) => {});
onpaste = (event) => {};
Event type
A ClipboardEvent
. Inherits from Event
.
Example
HTML
<?xml version="1.0" encoding="UTF-8"?>
<svg
viewBox="0 0 140 30"
width="600"
height="320"
xmlns="http://www.w3.org/2000/svg">
<foreignObject x="5" y="-10" width="90" height="20">
<input xmlns="http://www.w3.org/1999/xhtml" value="Copy this text" />
</foreignObject>
<text x="5" y="30" id="element-to-paste-text" tabindex="1">
Paste it here
</text>
</svg>
CSS
input {
font-size: 10px;
width: 100%;
height: 90%;
box-sizing: border-box;
border: 1px solid black;
}
JavaScript
document
.getElementById("element-to-paste-text")
.addEventListener("paste", (evt) => {
evt.target.textContent = evt.clipboardData
.getData("text/plain")
.toUpperCase();
evt.preventDefault();
});
Result
Specifications
Specification |
---|
Clipboard API and events # clipboard-event-paste |
HTML Standard # handler-onpaste |
Browser compatibility
BCD tables only load in the browser