jquery 插件zClip实现复制到剪贴板功能

阳光穿透心脏的1/2处 2022-05-23 11:39 216阅读 0赞

相信这个功能大家平时上网经常能碰到，以前也没怎么留意怎么实现的，直到项目中需要。

网上一搜一大堆，单纯使用js方法也不是没有，但是由于各浏览器的安全机制不同，不是跨浏览器的。去看了几个常用的网站，都是用的透明flash遮挡“复制到剪贴板”按钮，所以当你点击“复制到剪贴板”的时候，点击的其实是flash，然后把你需要复制的内容传入到了flash，然后在通过flash的复制功能把传入的内容复制到了剪贴板。

1. 准备工作

准备好jquery，然后去[http://www.steamdev.com/zclip/][http_www.steamdev.com_zclip]这里下载jquery.zclip.js和ZeroClipboard.swf ，不过那里的ZeroClipboard.swf下载地址失效了，你可以去这里[http://pan.baidu.com/share/link?shareid=1286340661&uk=2133883598&fid=2382679931][http_pan.baidu.com_share_link_shareid_1286340661_uk_2133883598_fid_2382679931]下载，我测试过可以使用。

在html里加上

2. 编写代码

下面是一个小demo，主要是复制文本框中的链接到剪贴板。

然后加入脚本，非常的简单。

![复制代码][copycode.gif]

![复制代码][copycode.gif]

这里的path是你flash的路径，copy是复制成功之后的回调函数。返回的是文本框里的value值。

另外我们还要对jquery.zclip.js进行设置，用编辑器打开它，就在前面，你会看到如下代码：

![复制代码][copycode.gif]

var settings = $.extend({
    
                    path: 'ZeroClipboard.swf',
                    copy: null,
                    beforeCopy: null,
                    afterCopy: null,
                    clickAfter: true,
                    setHandCursor: true,
                    setCSSEffects: true
    
                }, params);

![复制代码][copycode.gif]

同样修改path为你的flash--ZeroClipboard.swf的路径，其他的设置我们先不管他。

好了，立马来测试吧，不过这里要注意的是，本地测试是不成功的，你要用tomcat或apache在本机搭一个服务器，然后把文件放到服务器目录下测试。你会看到移到复制链接上的时候出现了小手，又见是flash的菜单，如图所示：

![22210317-bff54d4904fd42b79e1458b3041d4dba.jpg][]

然后点击它,出现成功提示框。你可以试着在其他地方粘贴，看看有没有复制成功。

![22210456-b5ac3c20a88542c9bbce430dd839e5b8.jpg][]

当然你也可以修改复制成功之后的提示框，或者添加更多功能。

在中找到如下代码。

![复制代码][copycode.gif]

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');
                            }
    
                        });

![复制代码][copycode.gif]

修改alert那个地方的代码就可以了，也许还有其他地方也可以修改，我没有细看。

3. 其他

我们用chrome打开我们的demo，打开控制台可以看到

![22211050-9cb94bb0c7e547579c0cf74ab4938a3c.jpg][]

没错，这正是插件给我们的页面插入了flash，可以看到它正好盖住了我们的”复制链接“按钮。

好了，使用插件zClip来实现复制到剪贴板的功能就介绍到这里了。更多的细节请访问：[http://www.steamdev.com/zclip/][http_www.steamdev.com_zclip]

详细介绍了插件的用法，以及相关参数的设置，包括复制成功之后的函数，怎么给”复制链接“按钮添加样式等等。

参考资料：[http://www.steamdev.com/zclip/][http_www.steamdev.com_zclip]

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>

复制链接有时可能需要加样式 position:relative

[http_www.steamdev.com_zclip]: http://www.steamdev.com/zclip/
[http_pan.baidu.com_share_link_shareid_1286340661_uk_2133883598_fid_2382679931]: http://pan.baidu.com/share/link?shareid=1286340661&uk=2133883598&fid=2382679931
[copycode.gif]: /images/20220523/37249661c81845e2832222eeb89324d1.png
[22210317-bff54d4904fd42b79e1458b3041d4dba.jpg]: /images/20220523/e944c1cfdab64a63a0f8272de19202fd.png
[22210456-b5ac3c20a88542c9bbce430dd839e5b8.jpg]: /images/20220523/70316f7945954fe5b0b47644fca0ee35.png
[22211050-9cb94bb0c7e547579c0cf74ab4938a3c.jpg]: /images/20220523/ad5a91717ad44a1e814c50a1031971a6.png