jQuery-zclip实现复制内容到剪切板

Posted where there is a will, there i

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery-zclip实现复制内容到剪切板相关的知识,希望对你有一定的参考价值。

jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题。jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe Flash Player。

本来以为,复制粘贴很简单,没想到还需要插件。

找了很多,这个jquery-zclip的插件算是不错的。

这里需要注意的就是,这个插件,必须在服务器的环境中才能正常显示效果。

 

jquery.zclip.min.js插件

文件放在服务器下面才能运行:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .opa_1, #share_wrap .opa_2, #share_wrap .opa_3 {
            display: inline-block;
            width:40px;
            float: left;
            position: relative;
            margin: 0 30px 0 400px;
        }
        .opa_1 a {
            display: inline-block;
            width: 48px;
            height: 44px;
            /*background: url(../Images/member/invite_icon.png) scroll no-repeat center center;*/
            background-position: -0px -0px;
            vertical-align: top;
            font-size: 12px;
            color: #191919;
            text-align: center;
            line-height: 1;
            padding: 52px 0 0 0;
            float: left;
            margin: 0;
            position: relative;
        }
        .copylink-wrap {
            width: 644px;
            height: 130px;
            position: absolute;
            z-index: 99;
            border: 1px solid #d1d1d1;
            padding: 30px 20px;
            background: #fff;
            border-radius: 8px;
            left: -307px;
            top: 70px;
            display: none;
        }
        .copylink-wrap .arrow {
            width: 19px;
            height: 9px;
            /*background: url(../Images/member/triggleUp.png) no-repeat;*/
            position: absolute;
            top: -9px;
        }
        .copylink-wrap p {
            font-size: 14px;
            color: #191919;
            padding-bottom: 10px;
        }
        .share-input {
            position: relative;
        }
        .share-input span {
            color: #18a1ff;
            font-size: 14px;
            width: 480px;
            height: 40px;
            display: inline-block;
            vertical-align: middle;
            line-height: 38px;
            background-color: #fff;
            border: solid 1px #dbdbdb;
            padding: 0 0 0 8px;
            float: left;
        }
        #share_wrap input {
            width: 110px;
            float: left;
            margin-left: 10px;
        }
        [class*="u-btn-"] {
            display: block;
            width: 100%;
            border: none;
            border-radius: 3px;
            text-decoration: none;
            cursor: pointer;
            text-align: center;
        }
        .u-btn-i2, .u-btn-s2, .u-btn-n2 {
            height: 40px;
            font-size: 16px;
        }
        .u-btn-i2 {
            border-bottom: 3px solid #da0000;
            line-height: 37px;
        }
        .u-btn-i1, .u-btn-i2, .u-btn-i3, .u-btn-i4 {
            color: #fff;
            background-color: #f52c40;
            border-bottom: 4px solid #da0000;
        }
        .u-btn-i2:hover {
            border-bottom: 4px solid #b40a0a;
        }
        .u-btn-i1:hover, .u-btn-i2:hover, .u-btn-i3:hover, .u-btn-i4:hover {
            border-bottom: 4px solid #b40a0a;
            background-color: #d71326;
            color: #fff;
        }
        .share-input input {
            width: 110px;
            float: left;
            margin-left: 10px;
        }
        .opa_1:hover .copylink-wrap{display: block;}
    </style>
    
    <!--引入jQuery-zclip相关js及swf文件-->
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.zclip.min.js"></script>
    
</head>
<body>
   <div class="opa_1">
        <a class="bds_copylink" href="javascript:void(0)">复制链接</a>
        <div class="copylink-wrap">
            <div class="arrow" style="left: 50%;"></div>
            <p>把链接分享给好友</p>
            <div class="share-input">
                <span id="copy_add">https://passport.gaosouyi.com/Index/register/rmid/1446577.html</span>
                <input id="btnCopyAddress" type="button" value="复制链接" class="u-btn-i2">
            </div>
        </div>
    </div> 
    <script type="text/javascript">
        $(function(){
            /*$(".opa_1").one(\'mouseover\',function(){
                $(\'.copylink-wrap\').show();
                
            });*/

            //复制链接
            $(".opa_1").hover(function() {
                $(".copylink-wrap").show();
            }, function(){
                var obj = $(this).find(".copylink-wrap");
                delay(obj);
            })

            //延迟
            function delay(obj){
                var onoff = false;
                var timer;
                obj.hover(function(){
                    onoff = true;
                    $(this).show();
                    clearTimeout(timer);
                },function(){
                    onoff = false;
                    $(this).hide();
                });
                if(!onoff){
                    timer = setTimeout(function(){obj.hide();},100);
                } 
            }
            $("#btnCopyAddress").one("mouseover",function(){//用mouseover不要用hover,事件用one绑定一次不会重复再绑定
                $(this).zclip({
                    path:\'ZeroClipboard.swf\', //记得把ZeroClipboard.swf引入到项目中 
                    copy:function(){
                      return $(\'#copy_add\').text();
                    },
            beforeCopy:function(){/* 按住鼠标时的操作 */
                            $(this).css("color","orange");
                        },
            afterCopy: function () { alert("ok"); } /* 复制成功后的操作 */
        });
      });
    });

    </script>

  </body>

</html>

 

以上是关于jQuery-zclip实现复制内容到剪切板的主要内容,如果未能解决你的问题,请参考以下文章

Vue复制内容到剪切板

兼容安卓和ios实现一键复制内容到剪切板

用js实现图片复制到剪切板的功能,兼容各种浏览器,例如IE,火狐、chome等。

js 如何实现将div内的内容放到剪切板?

QT读取剪切板内容-实现复制粘贴文本和图片

javascript复制内容到剪切板/网页上的复制按钮的实现