jquery.zclip复制内容到剪贴板兼容各浏览器

收藏

在一些网站中，我们会经常会遇到复制页面中的一段代码、URL地址、折扣码等信息，我们可以直接在页面中放置一个复制按钮，点击复制按钮，用户便可以复制内容。本文所需要的Zclip复制插件，是利用一个隐藏的flash文件来完成复制的功能，关键是它兼容当前各主流浏览器。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

首先引入jquery.js和zclip插件。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.zclip.min.js"></script>

接着我们在页面中加入复制按钮和输入框

<textarea id="content">请输入内容

当点击“复制内容”时，调用zclip插件，并提示复制成功，请看代码：

$(function() {
    $('#copy_btn').zclip({
        path: 'js/ZeroClipboard.swf',
        //flash地址
        copy: function() { //复制返回值
            return $('#content').val();
        },
        afterCopy: function() { //复制后操作方法
            $("<span id='tip'/>").insertAfter($('#copy_btn')).text('复制成功，右击粘贴试试').fadeOut(2000);
        }
    });
});

值得一提的是，少数用户可能没有装flash。So我们提供一个判断用户是否安装flash，若是有继续执行上面的操作，若是没有可以提示 ”亲，请您手动复制。。“

function flashChecker() {//返回1 说明已安装falsh
    var hasFlash = 0;//初始化未安装
    if (document.all) { //IE浏览器
        var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
        if (swf) {
            hasFlash = 1; //安装了falsh
        }
    } else { //其他浏览器
        if (navigator.plugins && navigator.plugins.length > 0) {
            var swf = navigator.plugins["Shockwave Flash"];
            if (swf) {
                hasFlash = 1;//安装了falsh
            }
        }
    }
    return hasFlash;//    return {f: hasFlash, v: flashVersion};
}

Zclip参数设置