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();
});
结果
规范
Specification |
---|
Clipboard API and events # clipboard-event-copy |
HTML Standard # handler-oncopy |
浏览器兼容性
BCD tables only load in the browser