了解如何使用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);
}
});
第一次在網頁上執行此代碼時,將彈出以下框:
您需要授予網站讀取剪貼簿的權限,否則任何網站都可以在未經您明確允許的情況下讀取剪貼簿,這將造成嚴重的安全問題。
在Codepen上查看並嘗試這個例子:A Clipboard API Read example。