如何在所有瀏覽器中使用 JavaScript 將文字複製到剪貼簿？

如何在 JavaScript中複製到剪貼簿（跨瀏覽器）

概述

至將文字複製到剪貼簿，您可以使用三種主要瀏覽器API：

1. 非同步剪貼簿API (navigator.clipboard.writeText)
2. document.execCommand('copy')（已棄用）
3. 覆蓋副本事件

一般開發注意事項

• 在控制台中測試程式碼時停用剪貼簿功能。
• 頁面必須是活動（非同步剪貼簿API）或需要使用者互動（document.execCommand('copy')）來存取

實作

非同步回退

為了獲得最佳的瀏覽器覆蓋率，請將非同步剪貼簿API與後退到document.execCommand('copy'):

copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!');
  }, function(err) {
    console.error('Async: Could not copy text: ', err);
  });
}

剪貼簿 API比較

API

功能

支援

API	Features	Support
Async Clipboard API	Text-focused, asynchronous, supports HTTPS	Chrome 66 (March 2018), works in inactive tabs
document.execCommand('copy')	Synchronous, reads text from DOM	Most browsers (as of April 2015), displays permission prompts
Overriding the Copy Event	Can modify clipboard content from any copy event, supports various data formats	Not directly related to the question

非同步剪貼簿API

以文字為中心，非同步，支援HTTPS

Chrome 66（2018 年 3月），適用於非活動標籤頁

document.execCommand('copy')

同步，從DOM 讀取文字

大多數瀏覽器（截至2015 年 4月），顯示權限提示

覆蓋複製事件

可以從任何複製事件修改剪貼簿內容，支援多種數據格式

與問題沒有直接關係

注意(2020/02/20)已棄用的權限會阻止程式碼片段在某些瀏覽器中運行。使用透過 HTTPS 提供的活動網頁進行測試和開發。

以上是如何在所有瀏覽器中使用 JavaScript 將文字複製到剪貼簿？的詳細內容。更多資訊請關注PHP中文網其他相關文章！