使用clipboard.js来替換ZeroClipboard.js进行复制

ZeroClipboard.js 有使用Flash格式的".swf" 覆盖在 按钮上方,进行复制,因为在使用Chrome浏览器浏览时,需要手动去开启网站可运行Flash,体验不算很好。

参考ZeroClipboard过时了,js复制插件clipboard.js无需flash文件,发现了 clipboard.js 的插件。

测试使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
</head>
<body>
<!-- Trigger -->
<button type="button" class="btn" data-clipboard-text="Test">
Copy to clipboard
</button>
<script type="text/javascript">
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);
});
</script>
</body>
</html>