使用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();