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实现复制内容到剪切板的主要内容，如果未能解决你的问题，请参考以下文章