如何使用JavaScript將內容複製到剪貼簿
了解如何使用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 (!...