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 2015年7月.
当用户通过浏览器的用户界面发起复制动作时，将触发 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();
});
结果
规范
| Specification |
|---|
| Clipboard API and events # clipboard-event-copy |
| HTML # handler-oncopy |
浏览器兼容性
Loading…