/

如何使用JavaScript將內容複製到剪貼簿

如何使用JavaScript將內容複製到剪貼簿

了解如何使用JavaScript和Clipboard API將內容複製到剪貼簿。

有時候，我們需要將網站上提供的內容複製並粘貼到其他地方，例如API金鑰或應用程序的激活令牌。

這些網站通常通過點擊內容框使內容複製到剪貼簿，然後我們可以直接粘貼到需要的地方。如何在自己的網站上實現這一功能呢？使用Clipboard API！

除了使用document.execCommand()功能來實現複製/粘貼的功能，我們也可以使用Clipboard API。事實上，Clipboard API設計的目的就是取代document.execCommand()。

Clipboard API可以在navigator.clipboard對象中使用：

1
navigator.clipboard

由於Clipboard API相對較新，並非所有瀏覽器都實現了該API。目前，主流的瀏覽器（例如：Chrome、現代版Edge、Firefox和Opera）都支持該API。

為了確保瀏覽器支持Clipboard API，可以通過檢查navigator.clipboard對象是否存在來進行判斷：

1
2
3
4
if (!navigator.clipboard) {
  // Clipboard API不可用
  return;
}

需要理解的一點是，沒有用戶許可的情況下不能從剪貼簿複製/粘貼內容。

對於讀取和寫入剪貼簿，所需的許可權略有不同。對於寫入剪貼簿，只需獲得用戶的意圖：將剪貼簿操作作為用戶動作的響應，例如點擊事件。

寫入剪貼簿

假設我們在HTML網頁上有一個<p>標籤：

1
<p>Some text</p>

我們為其添加一個點擊事件監聽器，並且首先檢查Clipboard API是否可用：

1
2
3
4
5
6
document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API不可用
    return;
  }
});

現在，我們希望將<p>標籤中的內容複製到剪貼簿中。我們可以通過查找event.target對應的元素上的innerText來實現：

1
2
3
4
5
6
7
document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API不可用
    return;
  }
  const text = event.target.innerText;
});

接下來，我們使用navigator.clipboard.writeText()方法來將內容寫入剪貼簿，並將其包裝在try/catch語句中以處理可能發生的任何錯誤。

以下是完整的示例代碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API不可用
    return;
  }
  const text = event.target.innerText;
  try {
    await navigator.clipboard.writeText(text);
    event.target.textContent = '已複製到剪貼簿';
  } catch (err) {
    console.error('複製失敗！', err);
  }
});

你可以在Codepen中查看並嘗試這個例子：A Clipboard API Write example。

從剪貼簿中讀取

這是如何從剪貼簿中讀取內容。我們有一個<p>標籤：

1
<p>Some text</p>

當點擊該標籤時，我們希望將元素的內容更改為剪貼簿中存儲的內容。

首先，我們創建點擊事件的監聽器，並檢查Clipboard API是否可用：

1
2
3
4
5
6
document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API不可用
    return;
  }
});

然後，我們調用navigator.clipboard.readText()方法。使用async/await將文本結果存儲到text變量中，然後將其作為event.target.textContent的值：

1
2
3
4
5
6
7
8
9
10
11
12
document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API不可用
    return;
  }
  try {
    const text = await navigator.clipboard.readText();
    event.target.textContent = text;
  } catch (err) {
    console.error('讀取失敗！', err);
  }
});

第一次在網頁上執行此代碼時，將彈出以下框：

Permission to access the Clipboard API

您需要授予網站讀取剪貼簿的權限，否則任何網站都可以在未經您明確允許的情況下讀取剪貼簿，這將造成嚴重的安全問題。

在Codepen上查看並嘗試這個例子：A Clipboard API Read example。

tags: [“JavaScript”, “Clipboard API”, “copy to clipboard”, “read from clipboard”]