js和zclip实现复制内容到剪贴板效果

怼烎@ 2022-07-21 01:46 263阅读 0赞

要实现点击"复制",可以把体验码复制到剪贴板,效果如下:

![Image 1][]

![20160712162948171][]

有两种实现方法,第一种纯js,但是不兼容safari,还有一种就是使用jquery的插件zclip,这个插件依赖flash,用户浏览器需要安装有flash才会正常运行

方法一:

//复制功能
    var code=$('#vip-code');
    var copyBtn=$('.copy-btn');
    $(copyBtn).click(function(){
        $(code).select();
        document.execCommand('Copy');
        alert("复制成功");
    })

方法二:

首先引入jquery.min.js和jquery.zclip.js

jquery.zclip.js的下载地址[http://download.csdn.net/download/songjgonline/8167901][http_download.csdn.net_download_songjgonline_8167901]

$(".copy-btn").zclip({
        path: "/res/static/vip/ZeroClipboard.swf",
        copy: function(){
            return $('#vip-code').val();
        },
        beforeCopy:function(){/* 按住鼠标时的操作 */
            $('#vip-code').select();
        },
        afterCopy:function(){/* 复制成功后的操作 */
            alert("复制成功");
        }
    });

异步加载出来的内容要绑定复制的事件,总是不起作用,后来就在用户每次触发异步加载的时候,执行复制方法

/**
     * 添加zclip插件
     * .每次动态生成class为btncopy的html元素都需要为该元素
     * 加载一次zclip插件才能正常使用
     */
    addclip: function (){
        $(".btncopy").zclip({
            path:"../res/modules/copy_text/ZeroClipboard.swf",
            copy:function()
            {
                return $(this).siblings(".ticket_pwd").text();
            },
            afterCopy:function(){/* 复制成功后的操作 */
                G_BOX.showMsg({
                    title: '卡密',
                    icon: 'hide',
                    retmsg: '<h3 style="text-align: center;"><br/>卡密已复制到粘贴板</h3>',
                    retcode: '',
                    width:394,
                    button: [{
                        id: 'ok',
                        value: '确定',
                        className: '',
                        display: true,
                        disabled: false,
                        handler: function() {
                            this.hide();
                        }
                    }]
                });
            }
    
    
        })
    }

但是测试时在ie8和ie7下,总是报语法错误,

在网上找到的解决方法([http://www.it610.com/article/426305.htm][http_www.it610.com_article_426305.htm])是修改插件代码,将glue里的

// style.backgroundColor = '#f00'; // debug
    appendElem.appendChild(this.div);

this.div.innerHTML = this.getHTML(box.width, box.height);

改为

this.div.innerHTML = this.getHTML(box.width, box.height);
    // style.backgroundColor = '#f00'; // debug
    appendElem.appendChild(this.div);

但是不明白是什么原因

在火狐下,测试发现,复制按钮变成了一个黑色块,

![20160908233536627][]

因为火狐没有安装flash的缘故.

[Image 1]: 
[20160712162948171]: /images/20220720/e89b04279d9349e48474e24506f38e69.png
[http_download.csdn.net_download_songjgonline_8167901]: http://download.csdn.net/download/songjgonline/8167901
[http_www.it610.com_article_426305.htm]: http://www.it610.com/article/426305.htm
[20160908233536627]: /images/20220720/a3556bae5db6440b9048fe6fb8505f2e.png