paste
event is fired on an
SVGGraphicsElement
when the user has initiated a "paste" action through the browser's user interface.
| 冒泡 | Yes |
|---|---|
| 可取消 | Yes |
| 接口 |
ClipboardEvent
|
| 事件处理程序特性 |
onpaste
|
If the cursor is in an editable context (for example, in a
<textarea>
or an element with
contenteditable
属性设置为
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
特性。
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.
<?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>
input {
font-size: 10px;
width: 100%;
height: 90%;
box-sizing: border-box;
border: 1px solid black;
}
document.getElementById("element-to-paste-text").addEventListener("paste", evt => {
evt.target.textContent = evt.clipboardData.getData("text/plain").toUpperCase();
evt.preventDefault();
});
| 规范 | 状态 | 注释 |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 | 候选推荐 | Definition that the clipboard events apply to SVG elements. |
| Clipboard API and events | 工作草案 | 初始定义 |
No compatibility data found. Please contribute data for "api.SVGGraphicsElement.paste_event" (depth: 1) to the MDN 兼容性数据存储库 .