在 Web 开发中，允许用户快速复制文本到剪贴板是非常常见的需求，比如在用户点击按钮后，将文本自动复制到剪贴板。clipboard.js 提供了一个简单、高效的解决方案来实现这一功能。本文将介绍如何使用 clipboard.js 在你的项目中复制文本到剪贴板，避免依赖冗长的步骤或笨重的插件。
为什么选择 clipboard.js？
复制文本到剪贴板不应该复杂。我们不需要复杂的配置或加载数百 KB 的代码，也不再需要依赖 Flash。clipboard.js 体积小巧（压缩后仅 3KB），并且完全摆脱了对 Flash 的依赖，支持现代浏览器。
安装 clipboard.js
有两种方式可以安装 clipboard.js：
使用 npm 安装
npm install clipboard --save
直接下载 ZIP 包
如果不想使用包管理工具，也可以直接下载 ZIP 文件。
使用方式
安装 clipboard.js 后，下一步是引入它到你的项目中。你可以直接从 dist 文件夹加载，或者使用 CDN 加载。
从本地文件引入
<script src="dist/clipboard.min.js"></script>
使用 CDN 引入
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
实例化 clipboard.js
一旦引入了脚本，你需要通过传递 DOM 选择器或 HTML 元素实例化 ClipboardJS：
new ClipboardJS(".btn");
这会在页面上所有匹配 .btn 选择器的元素上附加事件监听器，用于复制文本到剪贴板。为了提高性能，clipboard.js 使用了事件委托，只添加一个监听器，避免内存消耗过大的问题。
复制文本的几种方式
从其他元素复制文本
在很多情况下，我们需要从页面的其他元素中复制内容。这可以通过为触发按钮添加 data-clipboard-target 属性来实现。这个属性的值应该匹配目标元素的选择器。
<!-- 目标元素 -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git" />
<!-- 触发按钮 -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard" />
</button>
当用户点击按钮时，输入框中的文本将会被复制到剪贴板。
剪切文本
除了复制，还可以使用 data-clipboard-action 属性来实现剪切操作（类似于 Ctrl+X）。如果未指定这个属性，默认执行的是复制操作。
<!-- 目标元素 -->
<textarea id="bar">剪切这段文本...</textarea>
<!-- 触发按钮 -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
剪切到剪贴板
</button>
注意： 剪切操作仅适用于 <input> 和 <textarea> 元素。
直接复制文本
有时，你可能不需要从页面上的其他元素中复制内容。可以直接在触发按钮上添加 data-clipboard-text 属性，并指定要复制的文本内容。
<!-- 触发按钮 -->
<button class="btn" data-clipboard-text="复制这段文本">复制到剪贴板</button>
事件处理
clipboard.js 提供了 success 和 error 事件，方便开发者捕获用户的复制操作并进行自定义处理。
var clipboard = new ClipboardJS(".btn");
clipboard.on("success", function (e) {
console.log("复制成功:", e.text);
e.clearSelection();
});
clipboard.on("error", function (e) {
console.error("复制失败:", e.action);
});
通过监听这些事件，你可以显示提示或执行其他逻辑。
高级用法
clipboard.js 还支持动态设置复制目标和文本。例如，如果你想根据按钮的状态动态决定要复制的内容，可以这样实现：
new ClipboardJS(".btn", {
text: function (trigger) {
return trigger.getAttribute("data-copy");
},
});
在某些复杂场景下（如单页应用），你可能需要手动管理事件的销毁。你可以调用 clipboard.destroy() 来清除事件监听器。
var clipboard = new ClipboardJS(".btn");
clipboard.destroy();
浏览器支持
clipboard.js 依赖 Selection 和 execCommand API，所有现代浏览器均支持这些 API。在老旧浏览器中，该库也会优雅降级，提供相应提示（如按 Ctrl+C 复制）。
支持的浏览器版本：
- Chrome 42+
- Edge 12+
- Firefox 41+
- Internet Explorer 9+
- Opera 29+
- Safari 10+
完整示例
这里提供一个完整的可运行示例，演示如何使用 clipboard.js 实现文本复制到剪贴板。你可以直接将以下代码复制到你的 HTML 文件中并运行。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>clipboard.js 示例</title>
<!-- 引入 clipboard.js -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
}
.container {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
input,
textarea {
width: 100%;
padding: 10px;
margin-top: 10px;
}
.message {
color: green;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>使用 clipboard.js 复制文本到剪贴板</h1>
<!-- 输入框 -->
<input
id="copyInput"
value="https://github.com/zenorocha/clipboard.js.git"
/>
<!-- 复制按钮 -->
<button class="btn" data-clipboard-target="#copyInput">复制链接</button>
<!-- 文本区域 -->
<textarea id="copyText">复制这段文本...</textarea>
<!-- 剪切按钮 -->
<button
class="btn"
data-clipboard-action="cut"
data-clipboard-target="#copyText"
>
剪切文本
</button>
<!-- 直接复制文本按钮 -->
<button class="btn" data-clipboard-text="这是直接复制的文本">
复制预设文本
</button>
<!-- 显示操作结果的区域 -->
<div class="message" id="message"></div>
</div>
<script>
// 实例化 ClipboardJS
var clipboard = new ClipboardJS(".btn");
// 复制成功时的事件处理
clipboard.on("success", function (e) {
var message = document.getElementById("message");
message.textContent = "复制成功: " + e.text;
e.clearSelection(); // 清除选择
});
// 复制失败时的事件处理
clipboard.on("error", function (e) {
var message = document.getElementById("message");
message.textContent = "复制失败，请手动复制！";
});
</script>
</body>
</html>
总结
clipboard.js 是一个轻量级、简单易用的复制文本到剪贴板工具，避免了复杂的设置和冗余的代码。无论是从页面元素中复制文本，还是直接复制自定义文本，它都能轻松胜任。如果你的项目中有这类需求，clipboard.js 是一个值得尝试的解决方案。
