ZeroClipboard实现复制功能，做到浏览器兼容

绝地灬酷狼 2022-06-12 14:21 215阅读 0赞

公司有个项目最近要优化一下，其中有个业务就是要实现复制功能，并且兼容大多数浏览器，之前的是使用IE的window.clipboardData.setData()方法实现的，判断如果是不是IE则弹出alert()....只能支持IE浏览器，不能做到兼容，而优化项目的时候这个小块是我负责。

没有做过这种功能，听都没听过，就百度、谷歌一起来，最终网上的方法就是有一个欧洲大神封装的一个jQuery插件可以实现复制功能，并且可以兼容浏览器，但必须有服务器服务器和flash，我一想这不就是我要寻求的吗，随之开始深入了解，这个插件使用起来很简单，只需要jQuery文件、ZeroClipboard.swf文件和ZeroClipboard.js文件，在网上轻松可以找到下载的。本文最后也有链接免费下载  
1、首先引入jQuery.js和ZeroClipboard.js

ZeroClipboard.swf文件如果和ZeroClipboard.js文件放在一起可以不设置ZeroClipboard.swf文件，会自动加载，但尽量设置一下。  
2、在页面上

<body>
    <textarea id="testText" cols="30" rows="5" onChange="zeroClipboard.setText(this.value)">复制</textarea>
            <div id="containers" style="position:relative">
                <div id="clip_button">复制到剪贴板</div>
            </div>
    </body>

3、在js上

在步骤3中

zeroClipboard.glue( "clip_button", "containers" );

可以设置为

zeroClipboard.glue( "clip_button");

这样简单一些，但可能会造成定位不准确的问题，会复制失败，没有反应。而在步骤2中

style="position:relative"

当设置为`zeroClipboard.glue( "clip_button");` 时为了保证定位准确可以这样来保证定位准确，这个好像是进行相对位置布局。

在其他页面上知道的：

> flash的相对浮动
> 
> 这里还提供了一种更巧妙的方式：如果按钮的上层有任何position:relative的块状元素，比如div，而按钮和这个块状元素的位置又是相对固定的，那么可以在调用glue函数时，将这个div的id作为第二个参数传进去，不过同时reposition这个api就失效了。比如：
> 
> clip.glue( ‘clip-button-id’, ‘clip-container-id’ );

基本上以上可以复制一下，就是一个可以用的Hello word了。

下面是两个文件下载地址，可以提供免费下载  
jQuery1.9.1：[http://download.csdn.net/detail/p\_doraemon/9909182][http_download.csdn.net_detail_p_doraemon_9909182]  
zeroClipboard所需的两个文件：  
[http://download.csdn.net/detail/p\_doraemon/9909186][http_download.csdn.net_detail_p_doraemon_9909186]

[http_download.csdn.net_detail_p_doraemon_9909182]: http://download.csdn.net/detail/p_doraemon/9909182
[http_download.csdn.net_detail_p_doraemon_9909186]: http://download.csdn.net/detail/p_doraemon/9909186