Element：copy 事件

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

当用户通过浏览器的用户界面发起复制动作时，将触发 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
# handler-oncopy

浏览器兼容性

参见