如何使用 JavaScript 有效率地將文字複製到剪貼簿？

如何在 JavaScript 複製到剪貼簿

在 JavaScript 中，有多種方法將文字複製到剪貼簿，取決於瀏覽器支援。

1。非同步剪貼簿 API [navigator.clipboard.writeText]

非同步剪貼簿 API 在 Chrome 66 中提供，提供對剪貼簿的非同步存取。它使用 JavaScript Promises，允許無縫執行，而無需使用者提示中斷頁面。此外，文字可以直接從變數複製到剪貼簿。請注意，它僅適用於透過 HTTPS 提供的頁面。

2. document.execCommand('copy')（已棄用）

此方法是同步的，自2015 年4 月以來大多數瀏覽器都支持該方法。它會停止 JavaScript 執行，直到該過程完成，可能會向使用者顯示安全性提示。文字從 DOM 複製到剪貼簿。

一般開發注意事項：

• 在控制台中測試程式碼時，剪貼簿指令可能不起作用。
• 頁面必須處於活動狀態（對於非同步剪貼簿API）或需要使用者互動（對於document.execCommand('copy')）才能存取

後備方法：

為了確保跨瀏覽器相容性，建議在非同步剪貼簿API 中使用後備方法。這是一個範例：

function fallbackCopyTextToClipboard(text) {
  // Create a textarea element and copy text to it
  const textArea = document.createElement("textarea");
  textArea.value = text;

  // Append the textarea to the body and set properties
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  // Execute the copy command
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  // Remove the textarea from the body
  document.body.removeChild(textArea);
}

function 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);
  });
}

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