Zero Clipboard 利用 Flash 進行復制，之前有 Clipboard Copy 解決方案，其利用的是一個隱藏的 Flash。但最新的 Flash Player 10 只允許在 Flash 上進行操作才能啟動剪貼板。所以 Zero Clipboard 對此進行了改進，用了一個透明的 Flash ，讓其漂浮在按鈕之上，這樣其實點擊的不是按鈕而是 Flash ，也就可以使用 Flash 的復制功能了。
首先下載 Zero Clipboard ，並解壓縮。其中需要兩個文件：ZeroClipboard.js 和 ZeroClipboard.swf ，將這兩個文件放入到你的項目中。
Zero Clipboard : [主頁] [下載] [演示]
核心功能
第一步，導入 ZeroClipboard.js 文件：
<script type="text/javascript" src="ZeroClipboard.js"></script>
再設置 ZeroClipboard.swf 文件的路徑：
ZeroClipboard.setMoviePath( "ZeroClipboard.swf" );
注意：以上 ZeroClipboard.js, ZeroClipboard.swf 兩個文件的路徑都需要替換為你項目中對應文件的路徑。或者也可以是一個絕對路徑。
然後就使用了：
復制代碼 代碼如下:
var clip = new ZeroClipboard.Client(); // 新建一個對象
clip.setHandCursor( true ); // 設置鼠標為手型
clip.setText("哈哈"); // 設置要復制的文本。
// 注冊一個 button，參數為 id。點擊這個 button 就會復制。
// 這個 button 不一定要求是一個 input 按鈕，也可以是其他 DOM 元素。
clip.glue("copy-botton"); // 和上一句位置不可調換
這樣，這樣基本功能實現了，點擊按鈕就可以復制設置好的文本了。你可能注意到了，待復制的文本是固定的，如果想要動態改變的怎麼辦，比如復制一個輸入框中的內容。不用擔心，下面會講到的。
其他函數
Zero Clipboard 還提供了一些其他的函數，其中有一些非常有用。
reposition() 方法
因為按鈕上漂浮有一個 Flash 按鈕，所以當頁面大小發生變化時，Flash 按鈕可能會錯位，這樣就點不著了。 不要緊，Zero Clipboard 提供了一個 reposition() 方法，可以重新計算 Flash 按鈕的位置。我們可以將它綁定到 resize 事件上。
復制代碼 代碼如下:
bind(window, "resize", function(){
clip.reposition();
});
bind 是一個跨浏覽器的事件綁定函數。詳情請見4個跨浏覽器必備的函數 。
hide() 和 show() 方法
這兩個方法可以隱藏和顯示 Flash 按鈕 。其中 show() 方法會調用 reposition() 方法。
setCSSEffects() 方法
當鼠標移到按鈕上或點擊時，由於有 Flash 按鈕的遮擋，所以像 css “:hover”, “:active” 等偽類可能會失效。setCSSEffects() 方法就是解決這個問題。首先我們需要將偽類改成類，比如：
#copy-botton:hover{
border-color:#FF6633;
}
/* 可以改成下面的 ":hover" 改成 ".hover" */
#copy-botton.hover{
border-color:#FF6633;
}
我們可以調用 clip.setCSSEffects( true ); 這樣 Zero Clipboard 會自動為我們處理：將類 .hover 當成偽類 :hover 。
getHTML() 方法
如果你想自己實例一個 Flash ，不用 Zero Clipboard 的附著方法，那麼這個方法就可以幫上忙了。它接受兩個參數，分別為 Flash 的寬度和高度。返回的是 Flash 對應的 HTML 代碼。例如：
var html = clip.getHTML( 150, 20 );
你可以用 innerHTML 或直接 document.write(); 進行輸出。
以下是我測試下輸出的 HTML 代碼：
復制代碼 代碼如下:
<embed id="ZeroClipboardMovie_1" src="zeroclipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="150" height="20" name="ZeroClipboardMovie_1" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=150&height=20" wmode="transparent" />
IE 的 Flash JavaScript 通信接口上有一個 bug 。你必須插入一個 object 標簽到一個已存在的 DOM 元素中。並且在寫入 innerHTML 之前請確保該元素已經 appendChild 方法插入到 DOM 中。
Zero Clipboard 事件處理
Zero Clipboard 提供了一些事件，你可以自定義函數處理這些事件。Zero Clipboard 事件處理函數為 addEventListener(); 例如當 Flash 完全載入後會觸發一個事件 “load” 。
復制代碼 代碼如下:
clip.addEventListener( "load", function(client) {
alert("Flash 加載完畢！");
});
Zero Clipboard 會將 clip 對象作為參數傳入。即上例中的 “client” 。
還有 “load” 也可以寫成 “onLoad”，其他的事件也可以這樣。
其他事件還包括：
mouseOver 鼠標移上事件
mouseOut 鼠標移出事件
mouseDown 鼠標按下事件
mouseUp 鼠標松開事件
complete 復制成功事件
其中 mouseOver 事件和 complete 事件比較常用。
前面說過，如果需要動態改變待復制的內容，那 mouseOver 事件就可以派上用場了。例如需要動態復制一個 id 為 test 的輸入框中的值，我們可以在鼠標 over 的時候重新設置值。
復制代碼 代碼如下:
clip.addEventListener( "mouseOver", function(client) {
var test = document.getElementById("test");
client.setText( test.value ); // 重新設置要復制的值
});
復制成功：
復制代碼 代碼如下:
clip.addEventListener( "complete", function(){
alert("復制成功！");
});
好了，就介紹到這裡吧。趕快自己試驗下吧。