純js實現複製到剪貼簿功能
在網頁上覆制文字到剪下板，一般是使用JS+Flash結合的方法，網上有很多相關文章介紹。隨著 HTML5 技術的發展，Flash 已經在很多場合不適用了，甚至被遮蔽。本文介紹的一款JS外掛，實現了純JS方法複製文字到剪下板。
外掛名是Clipboard.js，該外掛不依賴 Flash，而是依賴於最新HTML5推出 Selection API 和 execCommand API。
execCommand 支援以下瀏覽器：Chrome瀏覽器42+，火狐41+，IE9+。Safari目前仍不支援cut和copy指令。
安裝
可以通過npm方式安裝：
npm install clipboard --save 或者bower：
bower install clipboard --save開始使用
首先需要在頁面引入：
<script src="dist/clipboard.min.js"></script>示例
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>clipboard示例</title>
<script src="../dist/clipboard.min.js"></script>
</head
點選頁面的點選複製就可以複製內容到剪下板了，console.log(e)可以打印出裡面的內容：
Object {action: "copy", text: "我是被複制的內容啊", trigger: div#btn.js-copy}用法
從屬性裡複製內容
Clipboard.js使用起來非常簡單，預設會複製data-clipboard-text屬性裡的值，你可以把需要複製的文字放在裡面。
上面我們使用document.getElementById獲取物件，還可以：
//直接通過ID
var clipboard = new Clipboard('#btn');
//直接通過class
var clipboard = new Clipboard('.js-copy');
//直接通過標籤也可以找到
var clipboard = new Clipboard('div');對於多處需要用到複製功能的：
<div class="js-copy" data-clipboard-text="text1">
<div class="js-copy" data-clipboard-text="text2">
<div class="js-copy" data-clipboard-text="text3">
同樣通過class查詢：
//直接通過class
var clipboard = new Clipboard('.js-copy');我們無需去設定點選事件。
從另外一個元素複製內容
示例：
<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button class="js-copy" data-clipboard-target="#bar">複製到剪下板</button>
上面的data-clipboard-target="#bar"屬性定義了複製時將複製id="bar"的內容。
當然，也可以在JS裡指定：
var clipboard = new Clipboard('.js-copy',{
target: function() {
return document.querySelector('#bar');
}
});
JS裡指定複製的內容
<button class="js-copy" data-clipboard-target="#bar">複製到剪下板</button>
<script>
var clipboard = new Clipboard('.js-copy', {
text: function() {
return '這裡被複制的內容';
}
});
</script>
將直接複製text裡指定的內容。
剪下功能(cut)
上面預設都實現了剪下功能。還可以指定是複製(copy)還是剪下(cut)。
在html裡指定：
<button class="js-copy" data-clipboard-action="copy">複製</button>
<button class="js-copy" data-clipboard-action="cut">剪下</button>
通過data-clipboard-action屬性指定。
高階選項
你可以設定回撥方法供Clipboard使用：
new Clipboard('.btn', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});
這裡的target接受一個回撥函式。同樣，text也支援接受一個回撥函式。
new Clipboard('.btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label');
}
});
清理Clipboard物件：
var clipboard = new Clipboard('.btn');
clipboard.destroy();瀏覽器支援
| 42+ ✔ | 41+ ✔ | 9+ ✔ | 29+ ✔ | Nope ✘ |
Safari目前還不支援execCommand提供的複製/剪下操作，包括移動端。
其它
一般建議全域性初始化Clipboard。全部使用相同的class，如.js-clipboard。
$(function(){
/*
* 複製到剪下板
* @see https://github.com/zenorocha/clipboard.js
*/
if(typeof Clipboard != 'function'){
return false; /*避免未引入Clipboard拋錯*/
}
var clipboard = new Clipboard('.js-clipboard');
clipboard.on('success', function(e) {
alert('複製成功');
});
});