如何使用 Clipboard.js 實現快速複製功能
介紹
Clipboard.js 是一個輕量級的 JavaScript 庫，旨在提供簡單易用的 API 來實現複製到剪貼簿的功能。它不需要額外的依賴，並且支持各種瀏覽器，是開發者在前端開發中非常實用的工具。
安裝
要使用 Clipboard.js，你可以選擇通過 CDN 引入或使用 npm 進行安裝。
通過 CDN
在你的 HTML 文件中，加入以下 <script> 標籤：
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
通過 npm
如果你在使用 npm 管理依賴，可以運行以下命令：
npm install clipboard --save原生做法
<button class="btn" data-clipboard-text="這是要複製的文本！">複製文本</button>
<input type="text">// 定義一個複製文本的函數
function copyToClipboard(text) {
const tempInput = document.createElement('input'); // 創建臨時 input 元素
tempInput.style.position = 'absolute';
tempInput.style.left = '-9999px'; // 將其隱藏
tempInput.value = text; // 設置要複製的文本
document.body.appendChild(tempInput); // 將 input 添加到 body
tempInput.select(); // 選取該文本
try {
document.execCommand('copy'); // 執行複製指令
alert('複製成功：' + text); // 顯示成功訊息
} catch (err) {
alert('複製失敗！'); // 顯示錯誤訊息
}
document.body.removeChild(tempInput); // 移除臨時 input 元素
}
// 綁定按鈕的點擊事件來觸發複製操作
document.querySelector('.btn').addEventListener('click', function() {
const textToCopy = this.getAttribute('data-clipboard-text'); // 取得要複製的文本
copyToClipboard(textToCopy); // 調用複製函數
});
基本用法
Clipboard.js 的基本用法非常簡單，只需要幾個步驟：
- 在 HTML 中設置可複製的元素，例如按鈕或文字。
- 使用 Clipboard.js 初始化這些元素，並指定要複製的內容。
<button class="btn" data-clipboard-text="這是要複製的文本！">複製文本</button>
<input type="text">const clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
alert('複製成功：' + e.text);
e.clearSelection();
});
clipboard.on('error', function(e) {
alert('複製失敗！');
});
初始畫面
複製成功跳出Alert
拿旁邊的input測試貼上
實際應用範例
以下是一些不同場景下的應用範例，展示如何使用 Clipboard.js。
複製多個內容
如果你需要複製多個不同的內容，可以使用 data-clipboard-target 屬性來指定要複製的內容。
<div>
<p>地址：<span id="address">114台北市內湖區瑞光路335號</span></p>
<p>電話：<span id="phone">0226580508</span></p>
<button class="btn" data-clipboard-target="#address">複製地址</button>
<button class="btn" data-clipboard-target="#phone">複製電話</button>
</div>
const clipboardContact = new ClipboardJS('.btn');
clipboardContact.on('success', function(e) {
alert('已複製：' + e.text);
e.clearSelection();
});
clipboardContact.on('error', function(e) {
alert('複製失敗！');
});
複製成功跳出Alert
複製成功提示的功能
clipboardInputText直接監聽成功事件，告訴用戶複製成功。
<input type="text" id="input-text" value="這是一段可以複製！" />
<button class="btn" data-clipboard-target="#input-text">複製文本</button>
<div id="tooltip" style="display:none;">文本已複製！</div>
const clipboardInputText = new ClipboardJS('.btn');
clipboardInputText.on('success', function(e) {
const tooltip = document.getElementById('tooltip');
tooltip.style.display = 'block';
setTimeout(() => {
tooltip.style.display = 'none';
}, 2000); // 2秒後隱藏提示
e.clearSelection();
});
clipboardInputText.on('error', function(e) {
alert('複製失敗！');
});
#tooltip {
display: none;
margin-top: 10px;
padding: 5px;
background-color: #4CAF50;
color: white;
border-radius: 5px;
}
封裝使用
由於使用的是原生 JavaScript，我們不需要依賴任何外部庫，如 Clipboard.js，這樣可以減少頁面加載時間，同時減少不必要的庫維護和更新需求。代碼的核心邏輯集中在一個 ClipboardManager 類中，讓開發者在同一處編寫和維護代碼，從而提高開發效率。
所有的複製邏輯都封裝在 ClipboardManager 類中，這樣外部無法直接訪問內部邏輯。這種封裝確保了代碼的安全性，並防止不必要的代碼篡改或暴露。你可以根據需要在這個類中擴展更多的功能，而不會影響其內部邏輯的完整性。
這裡採用了封裝的設計模式，將複製功能獨立出來成為一個類別，並確保其內部的細節對外部是透明的，同時方便對實現做抽換。這樣的設計模式不僅符合OOP(物件導向)的編程原則，還可以通過繼承或擴展來增加新功能。例如，你可以建立一個子類，來實現不同的複製行為或進一步自定義複製邏輯。
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>封裝的 JavaScript 複製剪貼簿範例</title>
<style>
#tooltip {
display: none;
margin-top: 10px;
padding: 5px;
background-color: #4CAF50;
color: white;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>封裝的 JavaScript 複製剪貼簿範例</h1>
<p>請複製以下文本：</p>
<input type="text" id="input-text" value="這是一段可以複製的文本！" />
<button id="copy-btn">複製文本</button>
<div id="tooltip">文本已複製！</div>
<script>
// 創建封裝的 ClipboardManager 類，提供複製功能
class ClipboardManager {
constructor(buttonId, inputId, tooltipId) {
this.button = document.getElementById(buttonId);
this.input = document.getElementById(inputId);
this.tooltip = document.getElementById(tooltipId);
// 初始化事件綁定
this.init();
}
// 初始化方法，綁定按鈕的 click 事件
init() {
this.button.addEventListener('click', () => this.copyToClipboard());
}
// 複製到剪貼簿的邏輯
copyToClipboard() {
this.input.select();
// 使用 Clipboard API 複製文本
navigator.clipboard.writeText(this.input.value).then(() => {
this.showTooltip();
}).catch(err => {
alert('複製失敗：' + err);
});
}
// 顯示提示訊息，並在 2 秒後自動隱藏
showTooltip() {
this.tooltip.style.display = 'block';
setTimeout(() => {
this.tooltip.style.display = 'none';
}, 2000);
}
}
// 創建 ClipboardManager 的實例
const clipboardManager = new ClipboardManager('copy-btn', 'input-text', 'tooltip');
</script>
</body>
</html>
小結
簡化代碼：Clipboard.js 提供了一個簡潔的 API，專門用於處理剪貼簿操作，這樣開發者不需要編寫複雜的原生 JavaScript 代碼來實現相同的功能。這不僅降低了開發的學習曲線，還提高了代碼的可讀性和可維護性 。
錯誤處理和兼容性：Clipboard.js 在複製操作失敗或成功時能提供callback處理，這有助於開發者處理不同瀏覽器之間的差異。這樣可以避免由於瀏覽器不支持某些 API 而導致的問題 。可以根據具體需求新增功能，而不需要修改原有的複製邏輯，這使得代碼更加靈活且易於重用 。
擴展性和可重用性：使用封裝的方式可以方便地對 Clipboard.js 的功能進行擴展。例如，開發者可以根據具體需求新增功能，而不需要修改原有的複製邏輯，這使得代碼更加靈活且易於重用 。
