元素:复制事件

copy 事件是 剪贴板 API 的一部分,当用户通过浏览器的用户界面启动复制操作时触发。

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

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

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

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

此事件会冒泡,是可取消的,并且是组合的

语法

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

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

oncopy = (event) => {};

事件类型

示例

实时示例

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

结果

规范

规范
剪贴板 API 和事件
# 剪贴板事件复制
HTML 标准
# 处理程序复制

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅