相信這個功能大家平時上網經常能碰到，以前也沒怎么留意怎么實現的，直到項目中需要。
網上一搜一大堆，單純使用js方法也不是沒有，但是由於各瀏覽器的安全機制不同，不是跨瀏覽器的。去看了幾個常用的網站，都是用的透明flash遮擋“復制到剪貼板”按鈕，所以當你點擊“復制到剪貼板”的時候，點擊的其實是flash，然后把你需要復制的內容傳入到了flash，然后在通過flash的復制功能把傳入的內容復制到了剪貼板。
1. 准備工作
准備好jquery，然后去http://www.steamdev.com/zclip/這里下載jquery.zclip.js和ZeroClipboard.swf ，不過那里的ZeroClipboard.swf下載地址失效了，你可以去這里http://pan.baidu.com/share/link?shareid=1286340661&uk=2133883598&fid=2382679931下載，我測試過可以使用。
在html里加上
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.zclip.js"></script>
2. 編寫代碼
下面是一個小demo，主要是復制文本框中的鏈接到剪貼板。
<input type="text" value="www.baidu.com" id="link"> <span id="copyBtn">復制鏈接</span>
然后加入腳本，非常的簡單。
<script> $('#copyBtn').zclip({ path: "ZeroClipboard.swf", copy: function(){ return $('#link').val(); } }); </script>
這里的path是你flash的路徑，copy是復制成功之后的回調函數。返回的是文本框里的value值。
另外我們還要對jquery.zclip.js進行設置，用編輯器打開它，就在前面，你會看到如下代碼：
var settings = $.extend({ path: 'ZeroClipboard.swf', copy: null, beforeCopy: null, afterCopy: null, clickAfter: true, setHandCursor: true, setCSSEffects: true }, params);
同樣修改path為你的flash--ZeroClipboard.swf的路徑，其他的設置我們先不管他。
好了，立馬來測試吧，不過這里要注意的是，本地測試是不成功的，你要用tomcat或apache在本機搭一個服務器，然后把文件放到服務器目錄下測試。你會看到移到復制鏈接上的時候出現了小手，又見是flash的菜單，如圖所示：
然后點擊它,出現成功提示框。你可以試着在其他地方粘貼，看看有沒有復制成功。
當然你也可以修改復制成功之后的提示框，或者添加更多功能。
在中找到如下代碼。
clip.addEventListener('complete', function(client, text) {
if ($.isFunction(settings.afterCopy)) {
o.trigger('zClip_afterCopy');
} else {
if (text.length > 500) {
text = text.substr(0, 500) + "...\n\n(" + (text.length - 500) + " characters not shown)";
}
o.removeClass('hover');
alert("Copied text to clipboard:\n\n " + text);
}
if (settings.clickAfter) {
o.trigger('click');
}
});
修改alert那個地方的代碼就可以了，也許還有其他地方也可以修改，我沒有細看。
3. 其他
我們用chrome打開我們的demo，打開控制台可以看到
沒錯，這正是插件給我們的頁面插入了flash，可以看到它正好蓋住了我們的”復制鏈接“按鈕。
好了，使用插件zClip來實現復制到剪貼板的功能就介紹到這里了。更多的細節請訪問：http://www.steamdev.com/zclip/
詳細介紹了插件的用法，以及相關參數的設置，包括復制成功之后的函數，怎么給”復制鏈接“按鈕添加樣式等等。
參考資料：http://www.steamdev.com/zclip/