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

        很多网站中都会提供一个复制的按钮，将当前的内容复制起来（相当于快捷键ctrl+c），方便用户复制使用，点击这个按钮之后，直接按快捷键ctrl+v即可粘贴对应的内容。

        jQuery-zclip是一个复制内容到剪贴板的jQuery插件，使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题。jQuery-zclip插件需要Flash的支持，使用时记得安装Adobe Flash Player。这里需要注意的就是，这个插件，必须在服务器的环境中才能正常显示效果。jquery.zclip.js下载

        1、引用jquery.zclip.js插件，需要jquery的支持

<!-- 点击复制begin -->
<script src=" 
<script type="text/javascript" src="jquery.zclip.js"></script>
<!-- 点击复制end -->

        2、添加css样式

<style>
/* 复制提示 */
.copy-tips{
    position:fixed;z-index:999;
    background-color:rgba(0, 0, 0, 0.2);
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#30000000, endColorstr=#30000000);
    padding:6px;
}
.copy-tips-wrap{
    padding:10px 20px;text-align:center;border:1px solid #F4D9A6;background-color:#FFFDEE;font-size:14px;
}
</style>

        3、作用的元素

<div>
    <input type="textarea" placeholder="复制我" id="phone_number"/>
    <input type="button" class="button_copy" id="clip_order_id" value="copy" />
</div>

        4、给需要复制的元素添加事件，这里的/js/zclip/ZeroClipboard.swf，一定要正确的引入

<script>
    $(function(){
        $("#clip_order_id").zclip({            //给复制按钮绑定zclip事件
            path: "./ZeroClipboard.swf",
            copy: function(){
                return $("#phone_number").val();        //返回给zclip插件要复制的值
            },
            beforeCopy:function(){ 
                $(this).css("color","orange");
            },
            afterCopy:function(){                    //复制成功后调用的方法
                //var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>? 复制成功</div></div>");
                //$("body").find(".copy-tips").remove().end().append($copysuc);
                //$(".copy-tips").fadeOut(3000);
                $("<div class='copy-tips'><div class='copy-tips-wrap'>? 复制成功</div></div>").insertAfter("#clip_order_id").fadeOut(3000);
	        var X = $('#clip_order_id').offset().top;
		var Y = $('#clip_order_id').offset().left;
		$('.copy-tips').css("top", X+$('#clip_order_id').height).css("left",Y);
            }
        });	
    });		
</script>

效果如图：

本文为崔凯原创文章,转载无需和我联系,但请注明来自冷暖自知一抹茶ckhttp://www.cksite.cn

• 上一篇： php滑动拼图验证码(极验)
• 下一篇： 使用jQuery插件生成二维码