Element：copy 事件

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

该事件的默认行为是将当前选中的内容（如有）复制到系统剪贴板。

事件处理器可以通过调用 ClipboardEvent.clipboardData 属性上的 setData(format, data) 修改剪贴板内容，并通过 event.preventDefault() 取消默认行为。

然而，事件处理器不可以读取剪贴板数据。

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

语法

在类似于 addEventListener() 这样的方法中使用事件名，或设置事件处理器属性。

js

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

oncopy = (event) => {};

事件类型

ClipboardEvent。继承自 Event。

Event ClipboardEvent

示例

实时示例

HTML

html

<div class="source" contenteditable="true">从这个盒子复制文字</div>
<div class="target" contenteditable="true">在这里粘贴</div>

JavaScript

js

const source = document.querySelector("div.source");

source.addEventListener("copy", (event) => {
  const selection = document.getSelection();
  event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
  event.preventDefault();
});

结果

规范

Specification
Clipboard API and events
# clipboard-event-copy
HTML Standard
# handler-oncopy

浏览器兼容性

BCD tables only load in the browser

参见