【经验总结】复制内容到剪贴板完美解决方案-Zero Clipboard
post by:天之骄子 2013-8-16 14:18
很多人在做“复制到剪贴板”功能的时候，几乎都会搜索JS兼容方案解决，但JS兼容方案也都会出现一个问题：
“不那么兼容”。
比如在火狐中，会默认禁止用户对剪贴板的访问，js复制的时候直接弹出“您的firefox安全限制限制您进行剪贴板操作，请打开'about:config'将signed.applets.codebase_principal_support'设置为true'之后重试”。
话说用户会傻到去修改firfox的配置么？还不如直接CTRL+C来得直接。
ZeroClipboard 库提供了一种简单的方法，使用一个透明的swf和一个JavaScript接口将文本复制到剪贴板。“透明的”标志着该库是无形的，用户界面是完全由你决定。
该库完全兼容Flash Player 10，用户单击即可完成拷贝内容到剪贴板的操作。这都是通过漂浮在DOM元素之上的swf完成的。
使用方法：
最新版的ZeroClipboard库可以参考如下方法：
Zero Clipboard : [Github项目主页] [ZeroClipboard下载] [在线演示]
下载ZeroClipboard库
页面中引入文件
<script type="text/javascript" src="ZeroClipboard.js"></script>
HTML文件：（指定data-clipboard-target为我们需要复制内容的textarea的id）
<html>
<body>
<textarea id="fe_text">Copy me!</textarea><br/>
<button id="copy-button" data-clipboard-target="fe_text" title="点击复制内容">点击复制内容</button>
<script src="ZeroClipboard.js"></script>
</body>
</html>JS文件：（直接实例化id为copy-button的button即可，绑定complete事件，args.text即是所要复制的texarea的内容[前提是HTML文件中一定要指定data-clipboard-target，如果不指定，则可以
在complete回调函数中用clip.setText("我要复制的内容");来设置内容，或者在HTML文件中指定data-clipboard-text="我要复制的内容" ;属性来设置内容]）var clip = new ZeroClipboard( document.getElementById("copy-button"), {
moviePath: "/path/to/ZeroClipboard.swf" //swf文件地址，如果和html同目录则不用设置
} );
clip.on( 'load', function(client) {
// alert( "swf文件加载完成" );
} );
clip.on( 'complete', function(client, args) {
this.style.display = 'none'; // "this" is the element that was clicked
alert("内容复制到了剪贴板: " + args.text );
} );具体可参考Github上的指引，或看demo中的用法。
老版的ZeroClipboard库可以参考链接：
Zero Clipboard : [项目主页] [ZeroClipboard下载] [在线演示]
Zero Clipboard跨浏览器复制内容到剪贴板
相比之下最新版的自然比老版的功能要优化一些。
评论：
三小无猜
2015-04-20 09:08 回复
这个插件如何使用上滑动跟下滑动啊？好像你没封装是吗？怎么用
lihua
2015-03-25 15:53 回复
@两小无猜：为什么我弄不好？？
两小无猜
2014-09-04 10:41 回复
写的简单清晰，代码运行起来很好，赞你
发表评论：