前端開發：如何使用Javascript實現複製到剪貼簿的功能

一些最常用的示例是從任何技術網站複製終端命令或整個程式碼段。 讓我們看看剪貼簿對我們什至意味著什麼，以及整個過程是如何工作的。 之後，我們將在 JavaScript 中實現此複製剪貼簿功能。

這篇文章要來分享如何使用Javascript實現複製到剪貼簿的功能呦！ 那就跟著以下操作教學，一起來試試吧！

$("body").append($temp); $temp.val(text).select(); $temp.select(); // $temp.setSelectionRange(0, 99999); //電話適用. document.execCommand("Copy"); $temp.remove(); Copyright © 2025 Suntargets. All rights reserved. Theme: Cenote by Them

如果要將任意內容複製到剪貼簿，需要先建立 <textarea> 元素，並將指定內容設為 value，再插入 DOM 樹中，呼叫 select() 與執行複製，最後刪除 <textarea> 元素。

在開發網頁的時候，不管是前端還是後台，都有可能會設計一些讓使用者直接複製貼上的需求。 如果在這種情況下，安排一個可以一鍵就完成複製的按鈕，那就更貼心更方便了。

首先要寫外掛工具, 就會有個 Input / Textarea 的欄位, 裡面放要讓人嵌入的程式碼, 然後旁邊要有個按紐, 是可以點擊就可以自動將程式碼複製進剪貼簿的功能, 所以下述會有幾個步驟:

寫入剪貼簿成功了以後，接下來要讀取剪貼簿，這時候就須要讀取 ClipboardItem 的內容，因為我們寫入的是 text/html 的格式，所以讀取的時候也要讀取一樣的格式，在你貼上的時候，應該會在左上角看到要求剪貼簿的權限，要按下允許後才可以貼上. 如果你在此網頁複製並貼上，你將會在下面看到 AWESOME 的文字出現，並且在 Console 有一個 log 顯示 AWESOME，你可以把 AWESOME 取代成 JSON 格式，或是任意格式，根據你的需求，就可以複製任何內容並處理它.