本篇文章將教您如何在網頁讓使用者快速複製內容！

您的網頁是否需要讓使用者複製內容，這時候可以使用 clipboard.js，我來教一下基本用法

首先下載 clipboard.js (點我下載)，解壓縮後資料夾內有一個 dist 資料夾，我們要裡面的 clipboard.min.js，在您的專案目錄新增 js 資料夾，把剛剛的 clipboard.min.js 複製進去。

接下來是程式碼

我們現在網頁 </body> 前輸入以下內容

<!-- clipboard.js -->
<script type="text/javascript" src="js/clipboard.min.js"></script>
<script type="text/javascript">new ClipboardJS('.copy');</script>

這是 clipboard.js 的設定！

我先來示範使用 input 的複製範例

<input id="content_1" value="【JavaScript】網頁點擊複製內容功能教學，使用 clipboard.js - https://blog.reh.tw/archives/351/"><br>
<button class="copy" data-clipboard-target="#content_1"> 複製 </button>

button 中 data-clipboard-target 是您 input 所設定的 ID (前面要帶 #)
button 中的 class=”copy” 是剛剛在 JavaScript 那邊設定的 (var clipboard = new Clipboard(‘.copy‘);)

下面的範例也都差不多

使用 textarea 的複製範例

<textarea id="content_2" rows="4" cols="60">【JavaScript】網頁點擊複製內容功能教學，使用 clipboard.js
https://blog.reh.tw/archives/351/</textarea><br>
<button class="copy" data-clipboard-target="#content_2"> 複製 </button>

只有按鈕的範例

<button class="copy" data-clipboard-text="【JavaScript】網頁點擊複製內容功能教學，使用 clipboard.js - https://blog.reh.tw/archives/351/"> 複製 </button>

以上是基本的程式碼範例

如果想要在複製成功或失敗時執行某程式碼可以把 new ClipboardJS('.copy'); 改成

/* 複製內容功能設定 */
var clipboard = new ClipboardJS('.copy');

//複製成功執行
clipboard.on('success', function(e) {
    e.clearSelection();
    alert("複製成功，您複製的內容為\n\n「"+e.text+"」");
});

//複製失敗執行
clipboard.on('error', function(e) {
    alert("複製失敗");
});

教學就到這邊結束，也可以參考一下我的範例專案喔！

GitHub
https://github.com/GoneTone/clipboard.js-demo

範例網頁
https://demo.reh.tw/clipboardJS/