SVGGraphicsElement: paste event - Web APIs 编辑

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.

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

See also

• Related events: cut, copy
• This event on HTML Element targets: paste
• This event on Document targets: paste
• This event on Window targets: paste