JavaScript 中將文字複製到剪貼簿
如今，許多 Web 開發人員都希望在其網站上實現一項功能，該功能使使用者只需單擊即可直接從其網站複製一堆文字。一些最常用的示例是從任何技術網站複製終端命令或整個程式碼段。
讓我們看看剪貼簿對我們什至意味著什麼，以及整個過程是如何工作的。之後，我們將在 JavaScript 中實現此複製剪貼簿功能。
我們計算機中存在的所有內容，如應用程式、影象、文字、檔案等，都被稱為資料。因此，每當我們嘗試複製計算機中存在的任何內容時，計算機都會將一小部分記憶體分配給我們已複製的資料，以將該資料儲存在該記憶體空間中。這稱為[剪貼簿]，這是計算機記住已複製資訊的方式。現在我們已將資料儲存在記憶體中，我們可以獲取此資料，然後將其貼上或根據需要多次使用。
從理論上講，這聽起來很簡單，但實際上由於包含許多複雜性，因此很難實現。但是不用擔心，使用 JavaScript，我們可以藉助 Document.execCommand() 方法和 Clipboard API 以一種更簡單的方式來完成此任務。
在 JavaScript 中使用 Document.execCommand() 方法將文字複製到剪貼簿
這是與剪貼簿互動的最常用方法。使用此方法，你可以執行以下 3 個操作。
- 使用
Document.execCommand('copy')將文字複製到剪貼簿中。 - 使用
Document.execCommand('cut')剪下文字並將其新增到剪貼簿中。 - 使用
Document.execCommand('paste')貼上已經出現在剪貼簿上的內容。
注意，我們必須傳遞我們要執行的操作的引數。在本文中，我們將只關注複製操作，而不關注其他操作。讓我們以一個示例並瞭解此複製操作為例。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<textarea id="textArea">We are learning to copy text to clipboard in JavaScript.</textarea>
<button onclick="copyToClipBoard()">Copy</button>
<script src="link to your JS file"></script>
</body>
</html>
function copyToClipBoard() {
var content = document.getElementById('textArea');
content.select();
document.execCommand('copy');
alert('Copied!');
}
首先，我們有一個 HTML 檔案，該檔案的 textarea 包含一個字串和一個 button。我們的目的是在單擊 Copy 按鈕時複製 textarea 內顯示的文字。其次，我們有一個 JS 檔案，其中有一個名為 copyToClipBoard() 的函式。此函式將負責將文字複製到剪貼簿。
最初，我們必須使用 document.getElementById 在我們的 DOM 中獲取 textarea，並將此元素儲存在 content 變數中。現在，我們在 content 變數中有了 textarea 的內容。要複製文字，我們首先必須使用 select() 方法選擇整個文字。這類似於如何使用滑鼠選擇文字。
使用 document.execCommand('copy') 方法，我們將複製選定的文字，並且將向使用者顯示警報，讓他知道該文字已被複制到剪貼簿。
最後，我們必須在 Copy 按鈕上呼叫 copyToClipBoard() 函式作為 onClick 事件。現在，如果你在瀏覽器中開啟此 HTML 頁面，你將看到最終結果。
使用 JavaScript 中的 Clipboard API 將文字複製到剪貼簿
Clipboard API提供非同步讀取和寫入操作，你可以使用它們在剪貼簿中複製和貼上內容。剪貼簿 API 可在 navigator.clipboard 物件中使用。
該 API 是 JavaScript 語言的新增功能，並不是所有的瀏覽器都能支援它，尤其是舊的瀏覽器。如果要檢查瀏覽器是否支援此 API，可以使用以下程式碼。
if (!navigator.clipboard) {
// Clipboard API not available
return
}
讓我們看看如何使用剪貼簿 API 將文字複製到剪貼簿。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<textarea id="textArea">We are learning to copy text to clipboard in JavaScript.</textarea>
<button id="btn" onclick="copyToClickBoard()">Copy</button>
<script src="link to your JS file"></script>
</body>
</html>
function copyToClickBoard() {
var content = document.getElementById('textArea').innerHTML;
navigator.clipboard.writeText(content)
.then(() => {console.log('Text copied to clipboard...')})
.catch(err => {
console.log('Something went wrong', err);
})
}
上面的程式碼幾乎與我們之前看到的程式碼相似。唯一的區別是我們修改了 copyToClickBoard() 函式。當我們按下複製按鈕時，將呼叫此方法。在此函式內部，我們首先使用 innerHTML 屬性獲取 textarea 內的文字，並將該文字儲存在 content 變數內。
navigator.clipboard 物件有兩種方法。一種是用於將文字複製到剪貼簿的 writeText() 方法，另一種是用於讀取剪貼簿中存在的文字並將其貼上的 readText() 方法。在這裡，我們只關心 writeText() 方法。
在此方法內部，我們必須傳遞變數 content，該變數當前以字串格式儲存整個文字。之後，此方法將獲取文字並將其複製到剪貼簿上。如果成功，我們將顯示一條訊息 Text copied to clipboard...，否則我們將根據發生的錯誤型別丟擲一條錯誤訊息。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn