元素: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

瀏覽器相容性

另見