“復(fù)制到剪貼板”是一個(gè)極為常見的web功能。多年來，我們一直依賴一個(gè)略顯“古老”的 API——document.execCommand('copy')。它曾是我們的得力助手，但現(xiàn)在，它已經(jīng)被正式標(biāo)記為廢棄（Deprecated）。

document.execCommand 為何被時(shí)代拋棄？

在擁抱新事物之前，我們有必要了解舊事物的缺陷。execCommand 主要有三大“原罪”：

1. 同步執(zhí)行：execCommand 是一個(gè)同步操作。這意味著在執(zhí)行時(shí)，它會阻塞瀏覽器的主線程。如果處理的數(shù)據(jù)量很大或頁面復(fù)雜，可能會導(dǎo)致頁面瞬間卡頓，影響用戶體驗(yàn)。
2. 依賴 DOM：execCommand 只能操作當(dāng)前文檔中**被選中（selected）**的內(nèi)容。為了復(fù)制一段任意文本，我們不得不采取一些非常“黑客”的手段：
• 動(dòng)態(tài)創(chuàng)建一個(gè)隱藏的 <textarea> 或 <input> 元素。
• 將想要復(fù)制的文本放入這個(gè)元素。
• 用 JavaScript 選中該元素的全部內(nèi)容。
• 調(diào)用 document.execCommand('copy')。
• 最后，移除這個(gè)臨時(shí)創(chuàng)建的元素。
  這一套流程繁瑣、不直觀，且容易出錯(cuò)。
3. 權(quán)限模型不清晰：它對剪貼板的訪問權(quán)限控制非常模糊，不同瀏覽器的實(shí)現(xiàn)和限制也存在差異，這帶來了一定的安全隱患。

正是因?yàn)檫@些原因，W3C 決定將其廢棄，并推出了一個(gè)為現(xiàn)代 Web 量身定做的解決方案。

新的主角：強(qiáng)大的 Clipboard API (navigator.clipboard)

Clipboard API 是一個(gè)異步的、基于 Promise 的現(xiàn)代接口，它徹底改變了我們與剪貼板交互的方式。

它的核心優(yōu)勢在于：

• 異步操作：所有操作都返回 Promise，不會阻塞主線程，對性能友好。
• 安全可靠：它整合了瀏覽器的權(quán)限系統(tǒng)（Permissions API）。在讀取剪貼板內(nèi)容時(shí)，需要明確獲得用戶的授權(quán)，并且大多數(shù)操作要求頁面在**安全上下文（HTTPS）**下運(yùn)行。
• 不依賴 DOM：你可以直接將字符串、圖片等數(shù)據(jù)寫入剪貼板，無需任何 DOM 元素作為中介。
• 功能更強(qiáng)大：除了純文本，它還支持寫入和讀取更豐富的數(shù)據(jù)類型，例如圖片。

實(shí)戰(zhàn)演練：如何使用 Clipboard API

讓我們來看幾個(gè)最常見的場景。

場景一：復(fù)制文本到剪貼板

這是最基礎(chǔ)的需求。使用 navigator.clipboard.writeText()，一切都變得異常簡單。

HTML:

<input id="copy-input" type="text" value="這是要被復(fù)制的文本">
<button id="copy-btn">復(fù)制文本</button>

JavaScript:

看，代碼干凈利落！我們不再需要任何隱藏的 <textarea>。async/await 和 try...catch 的組合完美地處理了異步流程和可能出現(xiàn)的錯(cuò)誤（例如用戶拒絕授權(quán)）。

場景二：從剪貼板讀取文本

讀取操作比寫入更敏感，因此瀏覽器會向用戶請求權(quán)限。注意： 出于安全考慮，readText() 和 read() 方法通常只能在用戶主動(dòng)交互（如點(diǎn)擊事件）的回調(diào)中調(diào)用。

HTML:

<button id="paste-btn">粘貼內(nèi)容</button>
<div id="paste-area" style="border: 1px solid #ccc; padding: 10px; min-height: 50px;"></div>

JavaScript:

場景三：更進(jìn)一步，復(fù)制圖片

這是 execCommand 無法直接做到的。Clipboard API 通過 write() 方法和 ClipboardItem 對象，讓復(fù)制非文本數(shù)據(jù)成為可能。

async function copyImageToClipboard(imageUrl) {
 try {
    // 1. 獲取圖片數(shù)據(jù)
    const response = await fetch(imageUrl);
    const blob = await response.blob(); // 將圖片轉(zhuǎn)換為 Blob 對象

    // 2. 創(chuàng)建一個(gè) ClipboardItem
    const item = new ClipboardItem({
      [blob.type]: blob
    });

    // 3. 寫入剪貼板
    await navigator.clipboard.write([item]);
    console.log('圖片已復(fù)制到剪貼板');
  } catch (err) {
    console.error('復(fù)制圖片失敗: ', err);
  }
}

// 使用示例
// copyImageToClipboard('path/to/your/image.png');

截至目前，所有主流現(xiàn)代瀏覽器（Chrome, Firefox, Edge, Safari）都已支持 Clipboard API 的核心功能。

閱讀原文：原文鏈接