当前位置: > > > ZeroClipboard.js - 跨浏览器复制到剪贴板,js复制内容

ZeroClipboard.js - 跨浏览器复制到剪贴板,js复制内容

开发网页的时候,如果我们需要提供复制到剪贴板的功能。可以通过ZeroClipboard.js来实现,而且可以跨浏览器。
其实现的原理是,创建一个隐藏的flash文件在页面上,然后先通过js把内容传递到这个flash里面,在通过flash把内容复制到剪贴板里面。

首先我们把ZeroClipboard.min.js引入进来。我们使用的话引入最小的包就可以了。
<script type="text/javascript" src="./zeroclipboard/ZeroClipboard.min.js"></script>

注意:打开ZeroClipboard.min.js,要把最后一行//# sourceMappingURL=..给删掉。这个实际使用中也不许要加载的。

下面是一个简单的例子,点击按钮就可以吧输入框里的文字复制下来:
<textarea id="code8">
</textarea>
<button id="btn" data-clipboard-target="code8">复制</button>
<script type="text/javascript">
	// 定义一个复制对象
	var clip1 = new ZeroClipboard(document.getElementById("btn"));
</script>

下面是更简单的例子,直接点击文本框就可以把该文本框的内容复制下来:
<textarea id="code8">
</textarea>
<script type="text/javascript">
	// 定义一个复制对象
	var clip1 = new ZeroClipboard(document.getElementById("code8"));
</script>

如果页面上有多个元素,也不需要一个个创建复制对象,new ZeroClipboard()支持单个元素也支持集合,下面通过jquery来实现:
var client = new ZeroClipboard($(".copy-button"));

我们还可以直接把文本复制到剪贴板,下面例子是单击按钮时,自动把默认的文字复制到剪贴板:
<button id="btn">复制</button>
<script type="text/javascript">
	var client = new ZeroClipboard(document.getElementById("btn"));
	client.setData("text/plain", "这个是复制的内容");
</script>

更多的用法可进入官网查看:http://zeroclipboard.org/
评论0