近来公司须要做一个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);
    });

完。