clipboard.js
一款将文本复制到剪贴板的js插件，不使用flash，最小仅3kb。
为什么要使用clipboard
clipboard.js 让web复制文本到剪贴板不再困难，使用起来非常简单，仅仅需要几句简单的js代码，而不需要几十个步骤来进行配置或加载数百KB的文件。 更重要的是，它不依赖于 Flash 、 JQuery 或任何其他框架。
安装
使用npm安装方式如下，你也可以 直接下载 ZIP包。
npm install clipboard --save设置
首先，通过 <script> 引用dist目录下的脚本（也可以使用CDN方式引用）。
<script src="dist/clipboard.min.js"></script>接下来通过传递 DOM 选择器、HTML 元素或 HTML 元素列表创建一个 clipboard.js 实例。
new ClipboardJS('.btn');使用方法
clipboard.js 采用了 HTML5 data attributes 来提高可用性。
从其它元素复制内容
一个非常常见的需求是从另一个元素复制内容。 您可以通过在触发器元素中添加 data-clipboard-target 属性来实现。
触发器元素的 data-clipboard-target 属性中包含的值需要与另一个元素的选择器相匹配。
<!-- Target -->
<input id="foo" value="https://www.codesou.cn">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
Copy to clipboard
</button>从其它元素剪切内容
另外，您可以定义一个 data-clipboard-action 属性来指定是要复制还是剪切内容，值为 cut 表示执行剪切操作。如果省略此属性，默认情况下将使用复制。
<!-- Target -->
<textarea id="bar">码农资源网，分享IT知识，网址：https://www.codesou.cn，本文档网址：http://www.codesou.cn/archives/2045，...</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>从属性复制内容
不一定非要从另一个元素复制其内容。 也可以只在触发器元素中包含一个 data-clipboard-text 属性并复制该属性的内容。
<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>事件
在某些情况下，您可能希望向用户显示操作反馈或捕获复制/剪切后获取的内容。
clipboard.js 提供了 success 和 error 事件方便监听和实现自定义逻辑。
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 不包含任何 CSS 。
高级用法
如果您不想修改 HTML，那么可以使用 javascript 实现同样的功能。
例如，如果要动态设置 target ，只需要返回一个节点即可。
new ClipboardJS('.btn', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});如果您想动态设置文本，需要返回一个字符串。
new ClipboardJS('.btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label');
}
});要在 Bootstrap Modals 或任何其他更改焦点的库中使用，您需要将焦点元素设置为容器值。
new ClipboardJS('.btn', {
container: document.getElementById('modal')
});此外，如果您正在使用单页应用程序，您可能希望更精确地管理 DOM 的生命周期。 以下方法可以清理 clipboard.js 创建的事件和对象。
var clipboard = new ClipboardJS('.btn');
clipboard.destroy();浏览器支持
clipboard.js依赖于 Selection 和 execCommand API。 所有浏览器都支持 Selection ，而 execCommand API 则并非如此，下面列出支持 execCommand API 的浏览器：
Chrome 42+
Edge 12+
Firefox 41+
IE 9+
Opera 29+
Safari 10+
好消息是，如果您需要支持旧浏览器，clipboard.js 会优雅地降级。 您所要做的就是显示对应的提示，当成功事件被调用时显示已复制！当错误事件被调用显示按下 Ctrl+C 复制，因为文本已经被选中。
您还可以通过运行 ClipboardJS.isSupported() 来检查是否支持 clipboard.js，这样您就可以从 UI 中隐藏复制/剪切按钮。
浏览器扩展
我们还开发了一个浏览器扩展，可以在GitHub、MDN、Gist、StackOverflow、StackExchange、npm甚至Medium上的每个代码块上都添加一个“复制到剪贴板”按钮。
