javascript使用ZeroClipboard组件复制内容到剪切板

代码下载地址:代码下载地址

在做项目时有一个需求，是需要复制内容到剪切板，在去网上查找之后，发现很多人发的代码或多或少都有一些小问题。

例如如下代码：

<script language="javascript">  
	function copy(){ 
		window.clipboardData.setData('text',document.getElementById('text').value); 
		alert("复制成功！");
	} 
</script>

上面的代码是可以使用的，但是仅仅是在IE下使用的，那在Chrome下如何解决这个问题呢。

经过在网络的大量查找，找到一个比较好的解决办法，那就是使用ZeroClipboard.js和ZeroClipboard.swf。

下面就是使用它们所需要做的工作：

引入jquery.js和ZeroClipboard.js我们就不说了。

<script type="text/javascript">
// 设置SWF文件的路径
ZeroClipboard.setMoviePath("swf/ZeroClipboard.swf");
$(document).ready(function(){
	$("button[id^=copy_]").each(function(){
		// 创建ZeroClipboard对象
		var clip = new ZeroClipboard.Client(); 	
		clip.setHandCursor(true); 
		var obj = $(this);
		var id = $(this).attr("id");
		// 要复制的内容
		var content = $(this).attr("copyContent");
		clip.setText(content);  
		clip.glue(id);
		//这个是复制成功后的提示  
		clip.addEventListener( "complete", function(){  
			alert("已经复制到剪切板！"+"\n"+content);   
		}); 
	});
});
</script>

因为我们需要复制到剪切板的按钮可能是一个列表，所以使用each函数对每一个按钮都进行绑定。

这里需要注意的一点就是这个复制按钮的id不能相同，是需要类似于copy_1,copy_2,copy_3这样，

这个也是目前为止比较不爽的地方。

如果大家谁有更好的，请消息我~