1.ZeroClipboard.js
點擊按鈕實現(xiàn)復制鏈接或者一段文本到剪貼板顽照，這個小功能想必不少人都見過。GitHub上就有這么一個點擊按鈕復制倉庫地址的功能吉嚣。如下圖所示：
Github用的是ZeroClipboard來實現(xiàn)這一功能幔亥。這個庫是用一個不可見的Flash來完成剪貼操作的琳疏。即將 Flash 做成透明的粪般，以便于我們放在諸如鏈接拼余、按鈕等需要放置的任何地方。這樣亩歹，用戶界面看起來沒有變化匙监，當點擊鏈接或按鈕時，實際上點擊是卻是 Flash小作，從而實現(xiàn)復制操作亭姥。具體實現(xiàn)方法，可以參考官方文檔http://zeroclipboard.org顾稀。
我們知道Flash正走向沒落达罗，不少功能被越來越強大的HTML5所替代。而且静秆，出于安全方面的考慮氮块，不少瀏覽器都默認禁用了Flash。那么有沒有不是Flash的實現(xiàn)方式呢诡宗？
2.clipboard.js
clipboard.js是個更加輕量的JavaScript庫，沒有使用Flash击儡，而是依賴于Selection和execCommand這兩個API塔沃，并且使用了HTML5的特性，比如自定義數(shù)據(jù)的
data-* 屬性。因此蛀柴，clipboard.js在兼容性方面比ZeroClipboard.js差螃概，但現(xiàn)代瀏覽器(IE9+)基本能夠兼容。
使用方法非常簡單：
1)下載代碼鸽疾，并引入到文件中吊洼。
<script src="dist/clipboard.min.js"></script>
2)實例化一個Clipboard對象，參數(shù)可以是CSS選擇器制肮、HTML節(jié)點冒窍、NodeList對象
參數(shù)為CSS選擇器：
new Clipboard('.btn'); // btn為DOM元素的class名, 跟jQuery的用法一樣。
參數(shù)為HTML節(jié)點：
var btn = document.getElementById('btn');
var clipboard = new Clipboard(btn);
參數(shù)為NodeList對象：
var btns = document.querySelectorAll('button');
var clipboard = new Clipboard(btns);
3)實例化對象的時候豺鼻，可以同時設(shè)置復制的內(nèi)容：
var clipboard = new Clipboard('.btn', {
text: function() {
return 'to be or not to be'; //剪貼板上的文本
}
});
4)也可以通過data-*屬性來設(shè)置要復制的內(nèi)容
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">點擊復制</button>
<script>
var clipboard = new Clipboard('.btn');
</script>
點擊一下综液，看看是否成功復制到剪貼板：
data-clipboard-target屬性的值#foo對應的是目標節(jié)點的CSS選擇器。
5）更多的配置信息和使用方法儒飒，請查閱clipboard.js官網(wǎng)谬莹，有興趣的朋友，應該看看它的源碼桩了。
注意我說的看源碼附帽，指的是src目錄的代碼。
代碼是長這樣的井誉。沒錯蕉扮，這是ES6的寫法。
千萬不要去看dist下的clipboard.js 送悔，那個是編譯之后的代碼慢显。
本文首發(fā)于Frank Wang的個人博客, 轉(zhuǎn)載時請附上原文鏈接http://www.wangxingfeng.com/copy2clipboard/
