SVGGraphicsElement: 复制事件

当用户通过浏览器的用户界面启动复制操作时，copy 事件将在 SVGGraphicsElements 上触发。

该事件的默认操作是将选择内容（如果有）复制到剪贴板。

此事件的处理程序可以通过在事件的 ClipboardEvent.clipboardData 属性上调用 setData(format, data) 来修改剪贴板内容，并使用 event.preventDefault() 取消事件的默认操作。

但是，处理程序无法读取剪贴板数据。

可以构建和分派一个 合成 copy 事件，但这不会影响系统剪贴板。

语法

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

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

oncopy = (event) => {};

事件类型

一个 ClipboardEvent。继承自 Event。

Event ClipboardEvent

示例

HTML

html
<?xml version="1.0" encoding="UTF-8"?>
<svg
  viewBox="0 0 100 30"
  width="600"
  height="320"
  xmlns="http://www.w3.org/2000/svg">
  <text x="5" y="10" id="text-to-copy">Copy this text</text>
  <foreignObject x="5" y="20" width="90" height="20">
    <input xmlns="http://www.w3.org/1999/xhtml" placeholder="Paste it here" />
  </foreignObject>
</svg>

CSS

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

JavaScript

js
document.querySelector("text").addEventListener("copy", (evt) => {
  evt.clipboardData.setData(
    "text/plain",
    document.getSelection().toString().toUpperCase(),
  );
  evt.preventDefault();
});

结果

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅