clipboard.js：现代的剪贴板操作库

在你日常的开发过程中，是不是常常需要实现文本复制功能？但又不想被复杂的配置步骤和庞大的框架拖累？那你一定得看看这款叫做clipboard.js的小工具啦！这玩意儿真是个宝藏，只有3kb的体积，却能轻松搞定文本复制，而且完全不需要Flash。

为什么选择clipboard.js？

说到复制文本到剪贴板，很多人可能会觉得这是一件麻烦事。配置步骤繁琐不说，还可能需要加载大块的代码。更别提那些依赖Flash的旧方法了，简直是个噩梦。clipboard.js就是为了解决这些问题而生的。它让复制文本变得简单又高效。

如何安装？

要安装clipboard.js，你可以使用npm，输入以下命令就行：

    
bash复制
    
npm install clipboard --save

    

如果你不喜欢用包管理工具，也可以直接下载一个ZIP文件来使用。

如何设置？

首先，你需要在你的项目中引入这个脚本，可以从dist文件夹中找到，或者直接从第三方CDN加载：

    
html复制
    
<script src="dist/clipboard.min.js"></script>

    

接下来，你需要实例化它，传入一个DOM选择器、HTML元素或者HTML元素列表：

    
javascript复制
    
new ClipboardJS('.btn');

    

clipboard.js内部会自动为你选择的元素添加事件监听器。不过呢，如果你的选择器匹配了很多元素，这个操作可能会占用不少内存。所以我们用了事件委托，这样只需要一个监听器就能搞定所有的元素，性能杠杠的。

如何使用？

我们正处于一个声明式编程的复兴时代，所以我们决定利用HTML5的数据属性来提高可用性。

从其他元素复制文本

一个常见的用例是从另一个元素复制内容。你只需要在触发元素上添加一个data-clipboard-target属性，属性值要匹配另一个元素的选择器。

    
html复制
    
<!-- 目标 -->
<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属性来指定你是想复制还是剪切内容。如果不设置这个属性，默认是复制。

    
html复制
    
<!-- 目标 -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- 触发器 -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

    

需要注意的是，剪切操作只对<input>或<textarea>元素有效。

从属性复制文本

其实呢，你甚至不需要另一个元素来复制内容。只需在触发元素中包含一个data-clipboard-text属性即可。

    
html复制
    
<!-- 触发器 -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

    

事件处理

有时候你可能想在复制/剪切操作后显示一些用户反馈或者捕获选中的内容。为此，我们提供了success和error事件，你可以监听这些事件并实现自定义逻辑。

    
javascript复制
    
var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

    

浏览器支持

clipboard.js依赖于Selection和execCommand API。前者被所有浏览器支持，而后者在以下浏览器中支持：

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

好消息是，如果你需要支持更老的浏览器，clipboard.js也能优雅降级。只需在成功事件被调用时显示一个“已复制”的提示，在错误事件被调用时显示“按Ctrl+C复制”的提示，因为文本已经被选中了。

额外功能

clipboard.js还有一个浏览器扩展，可以为GitHub、MDN、Gist、StackOverflow、StackExchange、npm，甚至Medium上的每个代码块添加一个“复制到剪贴板”按钮。支持Chrome和Firefox哦。

最后嘛，我的感觉是，clipboard.js真的是个小而美的工具，简单易用，功能强大，绝对值得一试！