首先需要下载clipboard.js库，下载地址：https://github.com/zenorocha/clipboard.js/archive/master.zip
然后引入dist目录下的clipboard.min.js文件
<script src="dist/clipboard.min.js"></script>在实例化一个复制按钮，例如：带有btn类的按钮都可以使用复制功能。
new ClipboardJS('.btn');之后就可以将要复制的内容放在input输入框里
<!-- Target -->
<input id="foo" value="果果开发">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="复制">
</button>或者放在textarea里
<!-- Target -->
<textarea id="bar">果果开发</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
剪切
</button>或者使用data-clipboard-text属性
<!-- Trigger -->
<button class="btn" data-clipboard-text="果果开发">
复制果果开发到剪切板
</button>复制按钮有3个属性：
- data-clipboard-target：指定要复制内容的元素ID。
- data-clipboard-action：指定是复制还是剪切，copy为复制，cut为剪切。
- data-clipboard-text：要复制的内容。
clipboard.js支持以下事件：
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);
});动态设置target属性
new ClipboardJS('.btn', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});动态设置text属性
new ClipboardJS('.btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label');
}
});对于使用Bootstrap Modals或者其它库改变了焦点的元素时，需要设置container值
new ClipboardJS('.btn', {
container: document.getElementById('modal')
});最后，还可以销毁复制对象
var clipboard = new ClipboardJS('.btn');
clipboard.destroy();