Zclip:复制页面内容到剪贴板兼容各浏览器

时间：2021-01-08 19:21:29

WEB开发中，要让用户复制页面中的一段代码、URL地址等信息，为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错，我们可以直接在页面中放置一个复制按钮，只需要轻轻一点这个复制按钮，内容将会被复制，然后用户可以粘贴到想粘贴的地方。

效果如下所示:

aaarticlea/png;base64,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" alt="" />

下面将结合实例讲解如何使用一款基于jQuery的插件——Zclip来实现复制内容到剪贴板的功能,只说如何使用,不讲原理。其实IE上有个方法可以实现点击复制，但是由于只是IE独有，所以我们不提倡。而Zclip是利用一个隐藏的flash文件来完成复制的功能，关键是它兼容当前各主流浏览器。

我在在本地测试不成功,所以最好部署到Tomcat上面进行测试。

jsp文件:

首先需要在页面中载入jquery库和zclip插件

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

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

接着我们在页面中的body部分加入如下代码：

<textarea id="mytext">请输入内容</textarea><br/>

<a href="#" id="copy_input" class="copy">复制内容</a>

页面中放置了一个输入框textarea，当然也可以是其他html元素，然后就是一个复制按钮，也可以是链接文本形式。

Javascript:

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

$(function(){

    $('#copy_input').zclip({

        path: 'js/ZeroClipboard.swf',

        copy: function(){//复制内容

            return $('#mytext').val();

        },

        afterCopy: function(){//复制成功

            $("<span id='msg'/>").insertAfter($('#copy_input')).text('复制成功');

        }

    });

});

值得注意的是如果是复制的内容来自输入框input、textarea等，copy对象使用：

copy: function(){

    return $('#mytext').val();

}

如果是复制的内容来自页面元素div、p之类的，copy对象使用：

copy: $('#mytext').text();

这样就完成了复制内容到剪贴板的功能。

完整代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta charset="utf-8">

<title>演示：复制页面内容到剪贴板兼容各浏览器</title>

<link rel="stylesheet" type="text/css" href="../css/main.css" />

<style type="text/css">

.demo{width:760px; margin:40px auto 0 auto; min-height:150px;}

textarea{width:100%; height:80px; border:1px solid #ddd; color:#666}

#para{line-height:24px; background:#f7f7f7; padding:10px}

.copy{line-height:32px}

#msg{margin-left:10px; color:green; border:1px solid #3c3; background:url(checkmark.png) no-repeat 2px 3px; padding:3px 6px 3px 20px}

</style>

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

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

<script type="text/javascript">

$(function(){

    $('#copy_input').zclip({

        path: 'js/ZeroClipboard.swf',

        copy: function(){

            return $('#mytext').val();

        },

        afterCopy: function(){

            $("<span id='msg'/>").insertAfter($('#copy_input')).text('复制成功').fadeOut(2000);

        }

    });

    $("#copy_p").zclip({

        path: 'js/ZeroClipboard.swf',

        copy: $('#para').text()+"Helloweba.com",

        afterCopy: function(){

            $("#para").css("background-color",'#cff');

            $("<span id='msg'/>").insertAfter($('#copy_p')).text('复制成功').fadeOut(2000);

        }

    });

    $('#mytext').focus(function(){

        var txt = $(this).val();

        if(txt=='请输入内容'){

            $(this).val('');

        }

    });

});

</script>

</head>

<body>

<div id="main">

   <div class="demo">

           <textarea id="mytext">请输入内容</textarea><br/>

        <a href="#" id="copy_input" class="copy">复制内容</a>

   </div>

</div>

</body>

</html>

参数说明

path：swf调用路径，必须，如js/ZeroClipboard.swf，ZeroClipboard.swf文件已存在下载包中。

copy：复制的内容，必须，任意字符串，也可以是回调函数返回的内容

beforeCopy：复制内容前回调函数，可选

afterCopy：复制内容后回调函数，可选

说明:这种方式我在复杂的样式环境下测试,flash定位不到点击按钮,在普通的样式里面没有问题,解决方案是需要修改源代码,可以查看我另外一篇博文:

jQuery ZeroClipboard中Flash定位不准确的解决方案

您也可以到zclip官网了解更多信息：http://steamdev.com/zclip/

完整DEMO下载:点击下载

原文地址参考:http://www.helloweba.com/view-blog-222.html

相关文章