相信這個功能大家平時上網經常能碰到，以前也沒怎麽留意怎麽實現的，直到項目中需要。

網上一搜一大堆，單純使用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/

js插件zClip實現復制到剪貼板功能