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

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

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

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

利用插件来写的话就比较简单，源码下载

<html>

<head>

    <title>Index</title>

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

    <script src="jquery.zclip.js"></script>

    <script type="text/javascript">

        $(function () {

            $('.copy').zclip({

                path: 'ZeroClipboard.swf',

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

                     return $(this).prev().prev().val();

                },

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

                    var msg= $(this).next().show();

                    setTimeout(function () { msg.hide() }, );

                }

            });

        });

    </script>

</head>

<body>

<div>

  <textarea>请输入内容</textarea><br/>

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

  <span style="color:red; display:none;">复制成功</span>

</div>

</body>

</html>

参数说明

path：swf调用路径，必填项，默认为：ZeroClipboard.swf

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

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

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

更多属性参考：http://steamdev.com/zclip/

Table中循环绑定复制链接

工作中碰到一个问题，在这里把问题和解决方案列出来，仅供参考，要求实现下面的形式：

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

下面的写法有并不能直接实现效果：

<!DOCTYPE html>

<html>

<head>

    <title>table</title>

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

    <script src="jquery.zclip.js"></script>

    <script type="text/javascript">

        $(function () {

            $('.copy').zclip({

                path: 'ZeroClipboard.swf',

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

                     return $(this).prev().prev().html();

                },

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

                    var msg= $(this).next().show();

                    setTimeout(function () { msg.hide() }, );

                }

            });

        });

    </script>

</head>

<body>

<table cellspacing="" cellpadding="" rules="all" border="" style="background-color: White; border-color: #CCCCCC; width: 70%;  border-collapse: collapse;">

<tr>

    <th>编号</th>

    <th>姓名</th>

    <th>链接</th>

</tr>

<tr>

<td></td>

<td>张三</td>

<td>

    <span>http://www.baidu.com</span><br/>

    <a href="#" class="copy">复制链接</a>

    <span style="color:red; display:none;">复制成功</span>

</td>

</tr>

<tr>

<td></td>

<td>李四</td>

<td>

    <span>http://www.taobao.com</span><br/>

    <a href="#" class="copy">复制链接</a>

    <span style="color:red; display:none;">复制成功</span>

</td>

</tr>

</table>

</body>

</html>

加入定位（position: relative;）之后就行了，我也没有搞明白是为什么，在此记录一下，如果有高手路过，请指点一下。源码下载

<!DOCTYPE html>

<html>

<head>

    <title>table</title>

     <style type="text/css">

        .pos{

          position: relative;

        }

    </style>

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

    <script src="jquery.zclip.js"></script>

    <script type="text/javascript">

        $(function () {

            $('.copy').zclip({

                path: 'ZeroClipboard.swf',

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

                     return $(this).prev().prev().html();

                },

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

                    var msg= $(this).next().show();

                    setTimeout(function () { msg.hide() }, );

                }

            });

        });

    </script>

</head>

<body>

<table cellspacing="" cellpadding="" rules="all" border="" style="background-color: White; border-color: #CCCCCC; width: 70%;  border-collapse: collapse;">

<tr>

    <th>编号</th>

    <th>姓名</th>

    <th>链接</th>

</tr>

<tr>

<td></td>

<td>张三</td>

<td class="pos">

    <span>http://www.baidu.com</span><br/>

    <a href="#" class="copy">复制链接</a>

    <span style="color:red; display:none;">复制成功</span>

</td>

</tr>

<tr>

<td></td>

<td>李四</td>

<td class="pos">

    <span>http://www.taobao.com</span><br/>

    <a href="#" class="copy">复制链接</a>

    <span style="color:red; display:none;">复制成功</span>

</td>

</tr>

</table>

</body>

</html>

说明

1、代码下载后需要部署到服务器上运行才行，比如在本地用IIS建一个网站或者虚拟目录

2、参考文章： http://www.helloweba.com/view-blog-222.html

http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html

相关文章