Element：copy 事件
当用户通过浏览器的用户界面发起复制动作时，将触发 copy 事件。
该事件的默认行为是将当前选中的内容（如有）复制到系统剪贴板。
事件处理器可以通过调用 ClipboardEvent.clipboardData 属性上的 setData(format, data) 修改剪贴板内容，并通过 event.preventDefault() 取消默认行为。
然而，事件处理器不可以读取剪贴板数据。
可以构建和派发一个合成 copy 事件，但这不会影响系统剪贴板。
语法
在类似于 addEventListener() 这样的方法中使用事件名，或设置事件处理器属性。
js
addEventListener("copy", (event) => {});
oncopy = (event) => {};
事件类型
ClipboardEvent。继承自 Event。
示例
实时示例
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();
});
结果
规范
| 规范 |
|---|
| Clipboard API and events # clipboard-event-copy |
| HTML # handler-oncopy |