SVGGraphicsElement: paste event
The paste
event is fired on an SVGGraphicsElement
when the user has initiated a "paste" action through the browser's user interface.
Bubbles | Yes |
---|---|
Cancelable | Yes |
Interface | ClipboardEvent |
Event handler property | onpaste |
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.
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
No specification found
No specification data found for api.SVGGraphicsElement.paste_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.paste_event
.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.