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.

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.

js
addEventListener("paste", (event) => {});

onpaste = (event) => {};

Event type

A ClipboardEvent. Inherits from Event.

Event ClipboardEvent

Example

HTML

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

css
input {
  font-size: 10px;
  width: 100%;
  height: 90%;
  box-sizing: border-box;
  border: 1px solid black;
}

JavaScript

js
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

See also