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

網上一搜一大堆，單純使用js方法也不是沒有，但是由於各瀏覽器的安全機制不同，不是跨瀏覽器的。去看了幾個常用的網站，都是用的透明flash遮擋“複製到剪貼簿”按鈕，所以當你點選“複製到剪貼簿”的時候，點選的其實是flash，然後把你需要複製的內容傳入到了flash，然後在通過flash的複製功能把傳入的內容複製到了剪貼簿。

1. 準備工作

在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，可以看到它正好蓋住了我們的”複製連結“按鈕。

詳細介紹了外掛的用法，以及相關引數的設定，包括複製成功之後的函式，怎麼給”複製連結“按鈕新增樣式等等。

from:   https://www.cnblogs.com/zmhaki/p/3205534.html

測試程式碼：

input type="text" name="agent" id="agent"  value="http://www.baiidu.com">
<p><a class="button button-round lr-button lr-button-1" id="copy">複製連結</a></p>
<script src="__PUBLIC__/js/modules/materialadmin/libs/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/modules/materialadmin/libs/zclip/jquery.zclip.js"></script>
<script type="text/javascript">
$('#copy').zclip({
        path: "__PUBLIC__/js/modules/materialadmin/libs/zclip/ZeroClipboard.swf",
copy: function(){
            return $('#agent').val();
}
    });
</script>