這是ZeroClipboard.js壓縮包下載,調(diào)試了好久,原來使用ZeroClipboard.js 必須放到web容器中才能調(diào)試,本地直接打開html是不行了!
ZeroClipboard.js壓縮包 用js與flash實(shí)現(xiàn)的復(fù)制到剪切板的文件,這款兼容性比較好,作者也是持續(xù)的更新。
ZeroClipboard.js壓縮包是在開發(fā)中經(jīng)常會用到復(fù)制的功能,在 IE 下通過JavaScript 內(nèi)置的window.clipboardData.setData 可以簡單實(shí)現(xiàn)復(fù)制到剪貼板功能,但是無法兼容其他瀏覽器,所以今天介紹一種終極解決方法:使用jhuckaby寫的Zero Clipboard的js類庫。此方法利用 Flash完成進(jìn)行復(fù)制內(nèi)容到剪貼板,所以只要瀏覽器裝有Flash 就可以復(fù)制內(nèi)容。
首先需要下載 Zero Clipboard的壓縮包,解壓后把文件夾中兩個文件:ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的項(xiàng)目中。
然后把在你要使用復(fù)制功能的頁面中引入Zero Clipboard的js文件:ZeroClipboard.js
如下代碼:
<script type="text/javascript" src="ZeroClipboard.js"></script>
注意:以上 ZeroClipboard.js, ZeroClipboard.swf需要放在同一路徑下。如果不在同一路徑,可使用ZeroClipboard.setMoviePath( “Flash路徑” );來設(shè)置ZeroClipboard.swf 地址
Zero Clipboard實(shí)現(xiàn)簡單跨瀏覽器復(fù)制
var clip = new ZeroClipboard.Client(); // 新建一個對象
clip.setHandCursor( true ); // 設(shè)置鼠標(biāo)為手型
clip.setText("哈哈"); // 設(shè)置要復(fù)制的文本。
// 注冊一個 button,參數(shù)為 id。點(diǎn)擊這個 button 就會復(fù)制。
//這個 button 不一定要求是一個 input 按鈕,也可以是其他 DOM 元素。
clip.glue("copy-botton"); // 和上一句位置不可調(diào)換
這樣,這樣基本功能實(shí)現(xiàn)了,點(diǎn)擊按鈕就可以復(fù)制設(shè)置好的文本了。你可能注意到了,待復(fù)制的文本是固定的,如果想要動態(tài)改變的怎么辦,比如復(fù)制一個輸入框中的內(nèi)容。不用擔(dān)心,下面會講到的。