使用clipboard实现前端页面复制到粘贴板的功能

最近公司需要做一个js实现复制的功能，本来以为会是很简单两三行js代码的事，后来发现网上说的那些原生js实现复制的方法很多浏览器因为安全的原因都不支持了，尝试了很长时间，还是死心了，决定使用第三方的js库。
最先看了利用flash技术的ZeroClipboard，体积庞大不好用放弃了。
最终选择了不依赖flash轻量级js库clipBoard，官网地址https://clipboardjs.com/

使用很简单
第一步：引入js库 <script src="../dist/clipboard.min.js"></script>
第二步：定义标签（一般是触发复制的按钮）<button class="btn">Copy</button>
第三步：实例化clipboard，调用构造函数var clipboard = new Clipboard('.btn');

结合官方给的demo看一下几种场景

1.从变量赋值内容到剪贴板

var clipboard = new Clipboard('.btn', {
        text: function() {
            return 'to be or not to be';
        }
    });

点击button，'to be or not to be'会粘贴到剪贴板

2.复制页面中div/input/textarea的内容

第一种方法构造函数里定义target

<div>hello</div>
var clipboard = new Clipboard('.btn', {
        target: function() {
            return document.querySelector('div');
        }
    });

点击button，'hello'会粘贴到剪贴板

还有第二种方法在button里定义属性data-clipboard-target和data-clipboard-action

<div>hello</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>
var clipboard = new Clipboard('.btn');

同样的，点击button，'hello'会粘贴到剪贴板

input和textarea用法类似

<input id="foo" type="text" value="hello">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

<textarea id="bar">hello</textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>

最重要的一点clipboard还定义了复制成功/失败的回调函数，方便我们去处理后面的逻辑

clipboard.on('success', function(e) {
        console.log(e);
    });

clipboard.on('error', function(e) {
        console.log(e);
    });

完。