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

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

使用很简单
第一步：引入js库
第二步：定义标签（一般是触发复制的按钮）Copy
第三步：实例化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

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

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

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

hello
Copy
var clipboard = new Clipboard('.btn');

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

input和textarea用法类似

Copy

hello
Cut

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

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

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

完。