SVGGraphicsElement: 粘贴事件

当用户通过浏览器的用户界面启动“粘贴”操作时，将为 SVGGraphicsElement 触发 paste 事件。

如果光标位于可编辑的上下文中（例如，在 <textarea> 或将 contenteditable 属性设置为 true 的元素中），则默认操作是将剪贴板的内容插入到光标位置处的文档中。

此事件的处理程序可以通过在事件的 clipboardData 属性上调用 getData() 来访问剪贴板内容。

为了覆盖默认行为（例如，插入一些不同的数据或剪贴板内容的转换），事件处理程序必须使用 event.preventDefault() 取消默认操作，然后手动插入其所需数据。

可以构造和分发 合成 的 paste 事件，但这不会影响文档的内容。

语法

在诸如 addEventListener() 之类的 方法中使用事件名称，或设置事件处理程序属性。

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

onpaste = (event) => {};

事件类型

ClipboardEvent。继承自 Event。

Event ClipboardEvent

示例

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();
  });

结果

规范

规范
剪贴板 API 和事件
# clipboard-event-paste
HTML 标准
# handler-onpaste

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅