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这样，

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

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