發布日期：2025 年 9 月 23 日
clipboardchange 事件是 Microsoft Edge 團隊在 Chrome 中新增的功能。這樣一來，您就能有效率地監控剪貼簿變更，不必輪詢，也不會造成效能負擔。
您現在可以在 Chrome 和 Edge 中，透過來源試用測試 clipboardchange 事件，版本 140 以上皆適用。歡迎在測試這項新功能時提供意見回饋，協助我們最終將其標準化。
輪詢剪貼簿以偵測變更時面臨的挑戰
如要瞭解系統剪貼簿中可用的內容，您必須使用效率不彰的輪詢方法。舉例來說，文字編輯網頁應用程式可能會想根據剪貼簿是否含有文字、圖片或 HTML 內容，啟用不同的「貼上」按鈕。
如要使用目前的方法達成這個目標，您必須重複呼叫 navigator.clipboard.read() 方法來檢查剪貼簿內容，如下列程式碼片段所示：
// Inefficient polling approach
setInterval(async () => {
try {
const clipboardItems = await navigator.clipboard.read();
updatePasteButtons(clipboardItems);
} catch (err) {
console.error('Failed to read clipboard:', err);
}
}, 1000); // Poll every second
雖然這樣也可以正常運作，但是仍然有重大缺點。
效能影響
不斷輪詢剪貼簿會造成不必要的負擔。每次呼叫 navigator.clipboard.read() 都需要系統層級的剪貼簿存取權，這可能會對應用程式效能造成負面影響，尤其是在資源受限的裝置上。輪詢頻率會成為回應速度和效能之間的取捨。
電池耗電
在行動裝置上，應用程式會持續存取系統資源，即使使用者並未主動複製或貼上內容，頻繁輪詢剪貼簿仍可能導致耗電。
使用者體驗不一致
輪詢間隔會在複製內容的時間，以及 UI 更新以反映新的剪貼簿狀態之間，造成延遲。使用者可能會看到過時的貼上按鈕狀態，或在短時間內無法使用正確的選項。
過度輪詢造成的隱私權疑慮
應用程式會持續讀取剪貼簿資料，即使資料沒有變更也是如此，因此頻繁存取剪貼簿可能會引發隱私權疑慮。對於注重剪貼簿內容隱私權的使用者來說，這可能會造成干擾。
「clipboardchange」活動
為解決這些問題，我們導入了名為「clipboardchange」的新事件，並在 Edge 和 Chrome 中推出來源試用功能，方便您在應用程式中測試。
這個事件可讓網路應用程式回應剪貼簿變更，而非主動輪詢。當內容從任何應用程式複製或剪下到剪貼簿、剪貼簿內容遭清除，或貼上內容 (在某些情況下可能會清除剪貼簿)，系統就會自動觸發這項事件。只有在文件具有焦點時，才會觸發事件。
如要監聽 clipboardchange 事件，請在 navigator.clipboard 介面上新增監聽器，如下所示：
navigator.clipboard.addEventListener('clipboardchange', event => {
console.log('Clipboard content changed!');
console.log('Available MIME types:', event.types);
// Update UI based on available formats
updatePasteButtons(event.types);
});
主要優點
相較於輪詢，clipboardchange 事件有以下優點：
- 效率高：只有在實際發生變更時，才會觸發事件。
- 保障隱私權：事件只會公開原生 MIME 類型，不會公開實際內容。
- 不會顯示權限提示：由於不會公開任何機密資料，因此不需要使用者授權。
- 即時回應：剪貼簿中的內容變更時，UI 會立即更新。
- 焦點感知：只有在文件具有焦點時，才會觸發事件。
types 屬性
clipboardchange 事件物件包含 types 屬性，其中含有剪貼簿中可用的 MIME 類型陣列：
navigator.clipboard.addEventListener('clipboardchange', event => {
// Example types array: ['text/plain', 'text/html', 'image/png']
const hasText = event.types.includes('text/plain');
const hasImage = event.types.includes('image/png');
const hasHtml = event.types.includes('text/html');
// Enable/disable paste buttons accordingly
document.getElementById('paste-text').disabled = !hasText;
document.getElementById('paste-image').disabled = !hasImage;
document.getElementById('paste-html').disabled = !hasHtml;
});
焦點行為
如果文件未處於焦點狀態時發生剪貼簿變更，當文件重新取得系統焦點時，系統會觸發單一 clipboardchange 事件。系統不會提供剪貼簿變更記錄資訊，只有在網頁取得焦點時可用的類型，才會納入 types 成員。
今天測試 clipboardchange 事件
您今天就能測試新的 clipboardchange 事件：
- 在本機啟用這項功能 (僅限瀏覽器)。
- 或者，在正式版網頁應用程式中註冊原始碼試用。
偵測 clipboardchange 事件，提升相容性
首先，由於這是新功能，您必須先偵測是否支援，才能使用。如要達成這個目標，請測試 navigator.clipboard 上是否存在 onclipboardchange 屬性，如下所示：
if ('onclipboardchange' in navigator.clipboard) {
// The clipboardchange event is supported
navigator.clipboard.addEventListener('clipboardchange', handleClipboardChange);
} else {
// Fallback to polling or other methods
console.log('clipboardchange event not supported, using fallback');
setInterval(checkClipboard, 2000);
}
在本機測試
如要僅在瀏覽器中測試 clipboardchange 事件，請按照下列步驟操作：
- 開啟「
about://flags」頁面。 - 在「Search flags」(搜尋旗標) 方塊中搜尋
ClipboardChangeEvent。 - 使用下拉式選單，將值從「Default」變更為「Enabled」。
- 重新啟動瀏覽器。
申請參加來源試用
如要在網站上對實際使用者測試 clipboardchange 事件，請在 Chrome 或 Edge 中註冊原始碼試用。這項來源試用活動將在 Chrome 和 Edge 140 到 142 版之間進行
(2025 年 9 月 2 日到 2025 年 12 月 2 日)。
請參閱「開始使用來源試用計畫」，進一步瞭解來源試用計畫，以及如何開始使用
示範
如要查看事件的實際運作情形，請探索我們的示範，並查看 GitHub 上的原始碼。
本範例說明如何使用 clipboardchange 事件建立回應式貼上介面，根據剪貼簿內容自動更新。
嘗試複製不同類型的內容 (文字、圖片、HTML)，並觀察貼上按鈕如何即時啟用和停用，完全不需要輪詢！
意見回饋
我們很想瞭解 clipboardchange 事件是否符合您的使用需求。如要提供意見，請在 W3C/clipboard-apis 存放區建立問題。
公開分享您對這項功能的興趣，有助於我們和其他瀏覽器瞭解這項功能對您的重要性，進而影響標準化程序。
即使這個事件可用於漸進式強化，我們仍希望將其標準化，納入 Clipboard API 規格，並最終讓所有瀏覽器採用。目前，您可以改用輪詢或其他剪貼簿監控技術。