在 Web 開發中，復制文本到剪貼板是一個常見需求。多年來，過去我們依賴 Flash 或 document.execCommand('copy') 來實現。它曾是我們的得力助手，但這些方法存在兼容性差、安全性低的問題。現已經被正式標記為廢棄（Deprecated）。
document.execCommand?為何被時代拋棄？
在擁抱新事物之前，我們有必要了解舊事物的缺陷。execCommand?主要有三大“原罪”：
- 同步執行：
execCommand?是一個同步操作。這意味著在執行時，它會阻塞瀏覽器的主線程。如果處理的數據量很大或頁面復雜，可能會導致頁面瞬間卡頓，影響用戶體驗。 - 依賴 DOM：
execCommand?只能操作當前文檔中**被選中（selected）**的內容。為了復制一段任意文本，我們不得不采取一些非常“黑客”的手段：- 動態創建一個隱藏的?
<textarea>?或?<input>?元素。 - 將想要復制的文本放入這個元素。
- 用 JavaScript 選中該元素的全部內容。
- 調用?
document.execCommand('copy')。 - 最后，移除這個臨時創建的元素。
這一套流程繁瑣、不直觀，且容易出錯。
- 動態創建一個隱藏的?
- 權限模型不清晰：它對剪貼板的訪問權限控制非常模糊，不同瀏覽器的實現和限制也存在差異，這帶來了一定的安全隱患。
正是因為這些原因，W3C 決定將其廢棄，并推出了一個為現代 Web 量身定做的解決方案。
隨著 Clipboard API 的推出，現代瀏覽器提供了更強大、安全的替代方案 —navigator.clipboard。
本文將詳細介紹該 API 的使用方式，并附上一個完整的 HTML 示例頁面供你直接運行和測試。
?
🔍 目錄
🔍 目錄
🧱 一、基本概念
💡 二、核心 API 使用示例
🔐 三、安全與權限控制
🧪 四、完整 HTML 示例頁面
🖥 五、瀏覽器兼容性
🛠 六、最佳實踐建議
🧑?💻 總結
?
🧱 一、基本概念
navigator.clipboard 是瀏覽器提供的一個對象，用于訪問系統剪貼板內容。它返回的是一個 Clipboard 接口實例，支持以下主要方法：
? 注意：大多數瀏覽器要求操作必須由用戶主動交互觸發（如點擊按鈕），否則會拋出錯誤。
?
💡 二、核心 API 使用示例
1. 復制文本到剪貼板
navigator.clipboard.writeText("Hello, world!").then(() => alert("復制成功")).catch(err => console.error("復制失敗:", err));
2. 從剪貼板讀取文本
navigator.clipboard.readText().then(text => alert("剪貼板內容為：" + text)).catch(err => console.error("讀取失敗:", err));
🔐 三、安全與權限控制
出于隱私和安全考慮，navigator.clipboard 的使用受到如下限制：
必須通過 HTTPS 提供網頁服務（本地開發環境 localhost 例外）
操作必須由用戶手勢觸發（如點擊事件）
用戶可以隨時拒絕剪貼板訪問權限
Safari 等瀏覽器目前僅支持部分功能
你可以先檢測是否可用：
if (navigator.clipboard) {console.log("Clipboard API 可用");
} else {console.log("當前環境不支持 Clipboard API");
}
🧪 四、完整 HTML 示例頁面
以下是一個可以直接運行的 HTML 頁面，包含復制和粘貼按鈕，演示了 navigator.clipboard 的基礎功能。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>navigator.clipboard 示例</title><style>body {font-family: Arial, sans-serif;padding: 20px;}button {margin: 10px 0;padding: 10px 20px;font-size: 16px;}textarea {width: 100%;height: 100px;margin-top: 10px;}</style>
</head>
<body><h1> navigator.clipboard 示例頁面 </h1><button onclick="copyText()">📋 復制文本</button><button onclick="pasteText()">📎 粘貼文本</button><textarea id="inputArea" placeholder="輸入你想復制的內容..."></textarea><script>function copyText() {const input = document.getElementById('inputArea');const text = input.value.trim();if (!text) {alert("請輸入要復制的內容");return;}navigator.clipboard.writeText(text).then(() => alert("? 文本已復制到剪貼板")).catch(err => console.error("? 復制失敗:", err));}function pasteText() {navigator.clipboard.readText().then(text => {const input = document.getElementById('inputArea');input.value = text;alert("? 已從剪貼板粘貼內容");}).catch(err => console.error("? 讀取剪貼板失敗:", err));}</script>
</body>
</html>
? 使用說明：
在瀏覽器中打開此 HTML 文件；
在文本框中輸入內容后點擊“復制”；
清空文本框后點擊“粘貼”，即可看到剪貼板中的內容。
?
🖥 五、瀏覽器兼容性
🔗 查看最新兼容情況：Can I Use - Async Clipboard API
?
🛠 六、最佳實踐建議
所有剪貼板操作都應包裹在 try...catch 中處理異常
確保操作由用戶主動觸發（如點擊按鈕）
提供回退機制（例如提示用戶手動復制）
不要頻繁調用剪貼板 API，避免干擾用戶體驗
考慮添加加載狀態或反饋提示提升交互體驗
?
🧑?💻 總結
navigator.clipboard 是現代 Web 開發中非常實用的 API，相比傳統的 execCommand，它更加簡潔、安全且易于維護。雖然目前某些高級功能仍處于實驗階段，但它無疑是未來剪貼板操作的標準方式。
掌握 navigator.clipboard，不僅能提升你的開發效率，還能顯著增強用戶交互體驗。
?
🔗 參考資料
MDN Web Docs - Clipboard API
W3C Clipboard API Specification
Can I Use - Async Clipboard API
)
