使用clipboard.js库完成复制或剪切功能

首先需要下载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个属性：

1. data-clipboard-target：指定要复制内容的元素ID。
2. data-clipboard-action：指定是复制还是剪切，copy为复制，cut为剪切。
3. 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();