如何使用JavaScript複製到剪貼板

了解如何使用剪貼板API使用JavaScript複製到剪貼板

有時,我使用的網站會提供我需要復制並粘貼到某處的內容。也許是API密鑰。也許是我剛購買的應用程序的激活令牌。

無論如何,他們可以讓您在一個框內單擊,然後將框內的文本複製到剪貼板,因此我可以直接將其粘貼到某個位置。

我們如何在我們的站點中實現該功能?使用剪貼板API!

還有一種使復制/粘貼有效的方法,即使用document.execCommand()功能。我不會在這裡討論該選項。 Clipboard API旨在成為該命令的後繼者。

剪貼板API可在navigator.clipboard目的:

navigator.clipboard

Clipboard API相對較新,並非所有瀏覽器都實現它。它可以在Chrome,現代Edge(基於鉻),Firefox和Opera上運行。

您可以檢查此對像是否存在,以確保已實現該功能:

if (!navigator.clipboard) {
  // Clipboard API not available
  return
}

您現在必須了解的一件事是,未經用戶許可,您無法從剪貼板複製/粘貼。

如果您正在讀取或寫入剪貼板,則權限是不同的。如果您正在編寫,那麼您所需要做的就是用戶的意圖:您需要將剪貼板操作放入對用戶操作(例如單擊)的響應中。

寫入剪貼板

說你有一個pHTML頁面中的元素:

<p>Some text</p>

您在其上創建一個單擊事件偵聽器,然後首先檢查剪貼板API是否可用:

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

現在,我們要復制該內容p標記到剪貼板。我們通過查找innerText的元素,由event.target

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

接下來,我們稱navigator.clipboard.writeText()方法,將其包裝在try / catch中以處理可能發生的任何錯誤。

這是示例的完整代碼:

document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }
  const text = event.target.innerText
  try {
    await navigator.clipboard.writeText(text)
    event.target.textContent = 'Copied to clipboard'
  } catch (err) {
    console.error('Failed to copy!', err)
  }
})

在這裡您可以查看並嘗試Codepen中的示例

看筆剪貼板API編寫示例由Flavio Copes(@flaviocopes) 在密碼筆

Tech Wiki Online!