在网页上复制文本到剪切板，一般是使用JS+Flash结合的方法，网上有很多相关文章介绍。随着 HTML5 技术的发展，Flash 已经在很多场合不适用了，甚至被屏蔽。本文介绍的一款JS插件，实现了纯JS方法复制文本到剪切板。
插件名是Clipboard.js，该插件不依赖 Flash，而是依赖于最新HTML5推出 Selection API 和 execCommand API。
execCommand 支持以下浏览器：Chrome浏览器42+，火狐41+，IE9+。Safari目前仍不支持cut和copy指令。
安装
Github：
https://github.com/zenorocha/clipboard.js
可以通过npm方式安装：
npm install clipboard --save或者bower：
bower install clipboard --save当然，也可以直接下载ZIP包：https://github.com/zenorocha/clipboard.js/archive/master.zip
开始使用
首先需要在页面引入：
<script src="dist/clipboard.min.js"></script>示例
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>clipboard示例</title> <script src="../dist/clipboard.min.js"></script> </head> <body> <!--data-clipboard-text属性的值将会被复制--> <div id="btn" class="js-copy" data-clipboard-text="我是被复制的内容啊"> <span>点击复制</span> </div> <script> var btn = document.getElementById('btn'); var clipboard = new Clipboard(btn);//实例化 //复制成功执行的回调，可选 clipboard.on('success', function(e) { console.log(e); }); //复制失败执行的回调，可选 clipboard.on('error', function(e) { console.log(e); }); </script> </body> </html>点击页面的点击复制就可以复制内容到剪切板了，console.log(e)可以打印出里面的内容：
Object {action: "copy", text: "我是被复制的内容啊", trigger: div#btn.js-copy}用法
从属性里复制内容
Clipboard.js使用起来非常简单，默认会复制data-clipboard-text属性里的值，你可以把需要复制的文本放在里面。
上面我们使用document.getElementById获取对象，还可以：
//直接通过ID var clipboard = new Clipboard('#btn'); //直接通过class var clipboard = new Clipboard('.js-copy'); //直接通过标签也可以找到 var clipboard = new Clipboard('div');对于多处需要用到复制功能的：
<div class="js-copy" data-clipboard-text="text1"> <div class="js-copy" data-clipboard-text="text2"> <div class="js-copy" data-clipboard-text="text3">同样通过class查找：
//直接通过class var clipboard = new Clipboard('.js-copy');我们无需去设置点击事件。
从另外一个元素复制内容
示例：
<!-- Target --> <textarea id="bar">Mussum ipsum cacilds...</textarea> <!-- Trigger --> <button class="js-copy" data-clipboard-target="#bar">复制到剪切板</button>上面的data-clipboard-target="#bar"属性定义了复制时将复制id="bar"的内容。
当然，也可以在JS里指定：
var clipboard = new Clipboard('.js-copy',{ target: function() { return document.querySelector('#bar'); } }); JS里指定复制的内容
<button class="js-copy" data-clipboard-target="#bar">复制到剪切板</button> <script> var clipboard = new Clipboard('.js-copy', { text: function() { return '这里被复制的内容'; } }); </script>将直接复制text里指定的内容。
剪切功能(cut)
上面默认都实现了剪切功能。还可以指定是复制(copy)还是剪切(cut)。
在html里指定：
<button class="js-copy" data-clipboard-action="copy">复制</button> <button class="js-copy" data-clipboard-action="cut">剪切</button>通过data-clipboard-action属性指定。
高级选项
你可以设置回调方法供Clipboard使用：
new Clipboard('.btn', { target: function(trigger) { return trigger.nextElementSibling; } });这里的target接受一个回调函数。同样，text也支持接受一个回调函数。
new Clipboard('.btn', { text: function(trigger) { return trigger.getAttribute('aria-label'); } });清理Clipboard对象：
var clipboard = new Clipboard('.btn'); clipboard.destroy();浏览器支持
Clipboard.js 基于 Selection 和 execCommand APIs . 第二个API仅被下面浏览器支持：
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 42+ ✔ | 41+ ✔ | 9+ ✔ | 29+ ✔ | Nope ✘ |
Safari目前还不支持execCommand提供的复制/剪切操作，包括移动端。
推荐阅读
1、clipboard.js中文网 — 纯JS实现复制文本到剪切板，无需Flash，轻量级JavaScript库
http://clipboardjs.52fhy.com/
2、clipboard.js — Copy to clipboard without Flash
https://clipboardjs.com/
作者：飞鸿影~
出处：http://52fhy.cnblogs.com/
