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

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

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

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

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

navigator.clipboard

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

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

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

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

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

寫入剪貼簿

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

<p>Some text</p>

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

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

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

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

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

以下是完整的示例代碼:

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>標籤:

<p>Some text</p>

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

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

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

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

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