clipboard.js 一个操作复制粘贴的小工具

发表于

不需要flash, 也不依赖一任何框架, 压缩后只有3kb.

#下载地址

1
npm install clipboard --save

引入

1
import * as Clip from "clipboard";

使用方法

html

复制另一个元素内容, data-clipboard-target为要拷贝的元素id

1
2
<input id="foo" value="要被复制的内容">
<button class="btn" data-clipboard-target="#foo">复制</button>

可以用data-clipboard-action属性来觉得是复制还是剪切, 内容为copy或cut

1
2
 <input id="foo" value="要被复制的内容">
<button class="btn" data-clipboard-target="#foo" data-clipboard-action='cut'>复制</button>

直接定义要复制出来的内容

1
<button class="btn" data-clipboard-text="复制内容">复制</button>

js

可监听两个事件: success 和 error

1
2
3
4
5
6
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
   
});
clipboard.on('error', function(e) {
});

进阶用法

直接指定要拷贝的元素

1
2
3
4
5
new Clipboard('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling;
    }
});

直接指定要拷贝的值

1
2
3
4
5
new Clipboard('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label');
    }
});

直接指定容器

1
2
3
new Clipboard('.btn', {
    container: document.getElementById('modal')
});

销毁事件

1
clipboard.destroy();

兼容性

Chrome 42+ Edge 12+ Firefox 41+ IE 9+ Opera 29+ Safari 10+

官网地址:https://clipboardjs.com/