最近做一個(gè)小功能，需要實(shí)現(xiàn)一鍵復(fù)制，由于之前用過jq的ZeroClipboard岳服，原理是通過flash來實(shí)現(xiàn)復(fù)制功能缘回，因?yàn)楝F(xiàn)在各大瀏覽器都在‘打壓’flash吆视，默認(rèn)都會(huì)把flash關(guān)閉掉典挑，優(yōu)先使用h5，所以就沒再次試用了啦吧！
總結(jié)下當(dāng)下的集中復(fù)制實(shí)現(xiàn)形式：
1您觉、基于flash的jq的ZeroClipboard
優(yōu)點(diǎn)：兼容性好，可易兼容ie（上古時(shí)代的破玩意）
缺點(diǎn)：(1)由于現(xiàn)代瀏覽器拋棄了flash授滓，所以讓基于flash的該方法也被限制的死死的琳水，我要是用戶，每次都讓我手動(dòng)開啟flash０愣选在孝？are you kidding me！淮摔？????(2)體積大 ????(3)移動(dòng)端不可用
2私沮、h5的新api->execCommand('copy')
優(yōu)點(diǎn)：簡(jiǎn)單、方便噩咪、不需要引入第三方庫顾彰，對(duì)于復(fù)制要求度不高的需求很方便
缺點(diǎn)：兼容性不是特別好，ie9以下胃碾，ios不兼容
實(shí)現(xiàn)：
$('.copy').click(function (e) {
? ? e.stopPropagation();
/*待選中內(nèi)容非輸入框*/
? ? window.getSelection().removeAllRanges();//清除當(dāng)前頁面中的選中區(qū)域
? ? var range = document.createRange();//創(chuàng)建range對(duì)象
? ? range.selectNode(document.getElementById("copyNode"));//選擇節(jié)點(diǎn)
? ? window.getSelection().addRange(range);//把range對(duì)像放入selection對(duì)象
/*待選中內(nèi)容為輸入框*/
$('#copyNode').select();
? ? var tag = document.execCommand('copy'); //一鍵復(fù)制
? ? if (tag) {
? ? ? ? window.getSelection().removeAllRanges();//復(fù)制完成后清除選中區(qū)域
? ? ? ? layer.msg('復(fù)制成功');
}
});
主要是使用range對(duì)象和selection對(duì)象以及document.execCommand('copy')方法來實(shí)現(xiàn)的涨享！
我選用的這種所以貼上的代碼??！
原理：先創(chuàng)建一個(gè)range對(duì)象仆百，選中需要復(fù)制的節(jié)點(diǎn)厕隧，把range對(duì)象放入selection對(duì)象中（代替我們手動(dòng)選中的操作）,然后利用execCommand方法放到粘貼板上，打完收工俄周！
3吁讨、Clipboard.js 封裝后execCommand('copy')
優(yōu)點(diǎn)：體積小啊，功能全啊峦朗，兼容性也好啊建丧，移動(dòng)pc通吃哦(除ie低版本)
缺點(diǎn)：跟execCommand方法一樣，畢竟核心方法不變
其他如ie的setData波势，這些用的少的就不介紹了翎朱！
第一次寫文章，希望能給需要的人一點(diǎn)幫助尺铣！
