元素:copy 事件

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

当用户通过浏览器的用户界面发起复制操作时,Clipboard APIcopy 事件会触发。

该事件的默认操作是将选中的内容(如果有)复制到剪贴板。

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

然而,处理程序无法读取剪贴板数据。

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

此事件会在 DOM 树中 冒泡,最终到达 DocumentWindow,它是 可取消的,并且是 composed 的。

语法

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

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

oncopy = (event) => { }

事件类型

一个 ClipboardEvent。继承自 Event

Event ClipboardEvent

示例

实时示例

HTML

html
<div class="source" contenteditable="true">Copy text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</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();
});

结果

规范

规范
Clipboard API 和事件
# clipboard-event-copy
HTML
# handler-oncopy

浏览器兼容性

另见