前記：本來(lái)原生的JS是有提供一個(gè)函數(shù)來(lái)實(shí)現(xiàn)這個(gè)功能(window.clipboardData)，但是很遺憾，這個(gè)函數(shù)僅僅支持IE和FF瀏覽器，所以基本用處不大。下邊介紹的是一個(gè)第三方插件庫(kù)(ZeroClipboard.js)。
ZeroClipboard.js在Git上的地址為：https://github.com/zeroclipboard/zeroclipboard
注意：此js庫(kù)不支持兼容手機(jī)端(包括Android、IOS)，僅支持PC端瀏覽器。
第一步：將插件庫(kù)引入到工程中。
把Git上的dist目錄copy到自己的目錄中(其實(shí)只需要ZeroClipboard.js和ZeroClipboard.swf就OK~)
腳本文件引入：
<script src="ZeroClipboard.js"></script>
第二步：初始化插件庫(kù)。
var clip = new ZeroClipboard( document.getElementById("d_clip_button"), { moviePath: "ZeroClipboard.swf"} );第三步：上代碼。
<!DOCTYPE html><html><head><title>Zero Clipboard Test</title><meta charset="utf-8"></head><body><!-- 說(shuō)明： 1.data-clipboard-target 輸入要復(fù)制的對(duì)象的ID--><button id="d_clip_button" class="my_clip_button" data-clipboard-target="fe_text"><b>復(fù)制到剪貼板</b></button><br/><textarea id="fe_text" cols="50" rows="3">輸入需要復(fù)制的內(nèi)容</textarea></body></html><script type="text/javascript" src="ZeroClipboard.js"></script><script type="text/javascript">//初始化復(fù)制對(duì)象var clip = new ZeroClipboard( document.getElementById("d_clip_button"), { moviePath: "ZeroClipboard.swf"} );//復(fù)制內(nèi)容到剪貼板成功后的操作clip.on( 'complete', function(client, args) { alert("復(fù)制成功，復(fù)制內(nèi)容為："+ args.text);} );</script>以上示例代碼注釋中已經(jīng)對(duì)Zero Clipboard的功能進(jìn)行了介紹，需要了解更多的功能請(qǐng)到https://github.com/zeroclipboard/ZeroClipboard
注意：運(yùn)行環(huán)境必須在服務(wù)器環(huán)境下，否則看不到效果！
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持武林網(wǎng)！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
