Clipboard.js：简单易用的剪贴板操作库

简介

Clipboard.js 是一个轻量级的 JavaScript 库，用于实现网页中的复制功能，无需 Flash 支持。它体积小巧（仅 3KB），使用方便，是现代网页开发中处理剪贴板操作的理想选择。

安装方式

NPM 安装

npm install clipboard

CDN 引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

基础用法

从按钮复制文本

<!-- HTML -->
<button class="btn" data-clipboard-text="要复制的文本">
    点击复制
</button>

<!-- JavaScript -->
<script>
    var clipboard = new ClipboardJS('.btn');
    
    clipboard.on('success', function(e) {
        console.log('复制成功');
        e.clearSelection();
    });
    
    clipboard.on('error', function(e) {
        console.log('复制失败');
    });
</script>

从其他元素复制文本

<!-- HTML -->
<input id="foo" value="要复制的输入框内容">
<button class="btn" data-clipboard-target="#foo">
    复制输入框内容
</button>

高级用法

自定义复制内容

new ClipboardJS('.btn', {
    text: function(trigger) {
        return '自定义的复制内容';
    }
});

复制 HTML 内容

<div id="bar">
    <b>粗体文本</b>
    <i>斜体文本</i>
</div>
<button class="btn" data-clipboard-target="#bar">
    复制 HTML
</button>

事件处理

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
    // 复制成功回调
    alert('复制成功！');
});

clipboard.on('error', function(e) {
    // 复制失败回调
    alert('复制失败，请手动复制');
});

注意事项

1. 确保在 HTTPS 环境下使用
2. 部分移动浏览器可能存在兼容性问题
3. 需要用户触发事件（如点击）才能执行复制操作

浏览器兼容性

• Chrome 42+
• Firefox 41+
• Safari 10+
• Edge 12+
• IE 9+

总结

Clipboard.js 提供了简单而强大的剪贴板操作功能，是前端开发中处理复制功能的优秀解决方案。它的零依赖特性和简洁的 API 设计，使得集成和使用都变得非常容易。