一句話介紹下clipboard.js：實現了純 JavaScript (無 Flash)的瀏覽器內容複製到系統剪貼板的功能。
我們可以通過以下方式獲取到clipboard.js：
1、可以使用cdn
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
2、也可以下載後引入(如果文件過期可以在評論通知我)
鏈接：https://share.weiyun.com/95dc49ba3ee0a9c26fe04e1a160b8e41 （密碼：DE6x8U）
3、當然可以去官網下載
官網
接着我們可以寫一個使用的demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
<script src="clipboard.js"></script>
<title>複製按鈕</title>
</head>
<body>
<span id="target">我是一段優美的文字</span>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">
複製按鈕
</button>
</body>
<script>
$(document).ready(function(){
var clipboard = new Clipboard('#copy_btn');
clipboard.on('success', function(e) {
alert("複製成功",1500);
e.clearSelection();
console.log(e.clearSelection);
});
});
</script>
</html> 代碼並不複雜，data-clipboard-target綁定的是目標標籤，如果你只是複製一段固定的內容，也可以在觸發器元素裏添加data-clipboard-text屬性(demo中即button)；data-clipboard-action屬性有兩個值，一個是copy複製一個是cut剪切，但是剪切只在<input>或<textarea>中生效，默認值是copy。除了複製用戶輸入的內容，固定內容，還可以用戶分享鏈接等..........
4、當然clipboard.js亦會存在一些兼容問題，下面是官網上的各瀏覽器支持情況
在網上看到了一些解決方案，比如二次封裝等...那時候自己是用了一個比較偷懶的方式....想起來真是臉紅
clipboard.on('success', function(e) {
e.clearSelection();
alert("複製成功！");
});
clipboard.on('error', function(e) {
alert("當前瀏覽器不支持此功能，請手動複製。")
});
