ZeroClipboard跨浏览器复制，flash复制，复制内容

最新推荐文章于 2024-09-11 16:28:03 发布

iteye_17476

最新推荐文章于 2024-09-11 16:28:03 发布

阅读量113

点赞数

分类专栏：插件文章标签： ZeroClipboard 跨浏览器复制 flash复制复制内容蕃薯耀

插件专栏收录该内容

50 篇文章

订阅专栏

本文介绍如何利用ZeroClipboard库在网页上实现文本复制功能。通过简单的步骤，包括引入必要的JS和SWF文件，创建ZeroClipboard对象并绑定事件，最终实现用户交互时将指定文本复制到剪贴板。

1- 引用文件。下载后会得到两个核心文件ZeroClipboard.js和ZeroClipboard.swf，在项目中引用其中一个就可以。
<script type="text/javascript" src="http://www.cnblogs.com/Scripts/ZeroClipboard/ZeroClipboard.js"></script>

2- 加载ZeroClipboard对象，并实现复制功能。
代码如下:
//设定flash文件引用路径。
ZeroClipboard.setMoviePath('http://www.cnblogs.com/Scripts/ZeroClipboard/ZeroClipboard.swf');
//创建ZeroClipboard对象
clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
//加载事件，在mouseOver事件中将需要复制的内容传到flahs文件中保存
clip.addEventListener('mouseOver', function(client) {
clip.setText($('#IndInfo').val());
});
//复制成功后弹出对话框
clip.addEventListener('complete', function(client, text) {
alert("Copied text to clipboard:\n\n" + text);
});
//指定实现复制功能对象
clip.glue('Copy');

更多内容请参考下面的：
引用来自：http://twohuo.com/zeroclipboard.html

1、首先到ZeroClipboard官方网站去下载需要的文件，将其中的ZeroClipboard.js 和ZeroClipboard10.swf 上传到您的网站。

2、根据提示修改好以下代码，然后添加到你的网页代码的<head></head>之间。

`01`	`<!-- 复制到剪切板 -->`

`02`	`<` `script` `type` `=` `"text/javascript"` `src` `=` `"ZeroClipboard.js"` `></` `script` `>` `<!--替换为正确的ZeroClipboard.js路径 -->`

`03`	`<` `script` `type` `=` `"text/javascript"` `>`

`04`	`ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' );` `<!--替换为正确的ZeroClipboard10.swf路径-->`

`05`	`var clip = null;`

`06`	`<!--btn_id,btn_id2用于定位flash，test_str为传入的文本，isId为0或者控件ID-->`

`07`	`function copy_code(btn_id,btn_id2,test_str,isId) {`

`08`	`clip = new ZeroClipboard.Client();`

`09`	`clip.setHandCursor(true);`

`10`	`clip.addEventListener('mouseOver', function (client) {`

`11`	`<!-- update the text on mouse over-->`

`12`	`<!--传入ID时，用ID的value替换文本。-->`

`13`	`if(isId !== 0){`

`14`	`test_str = document.getElementByIdx_x(isId).value;`

15 }

`16`	`clip.setText(test_str);`

17 });

`18`	`clip.addEventListener('complete', function (client, text) {`

`19`	`alert("复制成功，你可以使用Ctrl+V 粘贴。");`

`20`	`clip.destroy();`

21 });

`22`	`clip.glue(btn_id,btn_id2);`

23 }

`24`	`</` `script` `>`

3、使用的时候，先用一个style="position:relative;"的div来定位，然后在页面控件中使用onmouseover事件来调用copy_code()函数，如下是参考示例：

< div id = "d_clip_container" style = "position:relative;" >

< input type = "button" id = "btn_copy" value = "复制" onmouseover = "copy_code(this.id,'d_clip_container'," http://twohuo.com/",0);" />