最近做一個小功能，需要實現(xiàn)一鍵復(fù)制，由于之前用過jq的ZeroClipboard，原理是通過flash來實現(xiàn)復(fù)制功能，因為現(xiàn)在各大瀏覽器都在‘打壓’flash，默認(rèn)都會把flash關(guān)閉掉，優(yōu)先使用h5，所以就沒再次試用了！

總結(jié)下當(dāng)下的集中復(fù)制實現(xiàn)形式：

1、基于flash的jq的ZeroClipboard

優(yōu)點：兼容性好，可易兼容ie（上古時代的破玩意）

缺點：(1)由于現(xiàn)代瀏覽器拋棄了flash，所以讓基于flash的該方法也被限制的死死的，我要是用戶，每次都讓我手動開啟flash！？are you kidding me！？????(2)體積大 ????(3)移動端不可用

2、h5的新api->execCommand('copy')

優(yōu)點：簡單、方便、不需要引入第三方庫，對于復(fù)制要求度不高的需求很方便

缺點：兼容性不是特別好，ie9以下，ios不兼容

實現(xiàn)：

$('.copy').click(function (e) {

? ? e.stopPropagation();

/*待選中內(nèi)容非輸入框*/

? ? window.getSelection().removeAllRanges();//清除當(dāng)前頁面中的選中區(qū)域

? ? var range = document.createRange();//創(chuàng)建range對象

? ? range.selectNode(document.getElementById("copyNode"));//選擇節(jié)點

? ? window.getSelection().addRange(range);//把range對像放入selection對象

/*待選中內(nèi)容為輸入框*/

$('#copyNode').select();

? ? var tag = document.execCommand('copy'); //一鍵復(fù)制

? ? if (tag) {

? ? ? ? window.getSelection().removeAllRanges();//復(fù)制完成后清除選中區(qū)域

? ? ? ? layer.msg('復(fù)制成功');

}

});

主要是使用range對象和selection對象以及document.execCommand('copy')方法來實現(xiàn)的！

我選用的這種所以貼上的代碼??！

原理：先創(chuàng)建一個range對象，選中需要復(fù)制的節(jié)點，把range對象放入selection對象中（代替我們手動選中的操作）,然后利用execCommand方法放到粘貼板上，打完收工！

3、Clipboard.js 封裝后execCommand('copy')

優(yōu)點：體積小啊，功能全啊，兼容性也好啊，移動pc通吃哦(除ie低版本)

缺點：跟execCommand方法一樣，畢竟核心方法不變

其他如ie的setData，這些用的少的就不介紹了！

第一次寫文章，希望能給需要的人一點幫助！