使用ZeroClipboard 复制内容到剪贴板

开发网页的时候，如果我们需要提供复制到剪贴板的功能。可以通过ZeroClipboard.js来实现，而且可以跨浏览器。

其实现的原理是，创建一个隐藏的flash文件在页面上，然后先通过js把内容传递到这个flash里面，在通过flash把内容复制到剪贴板里面。

首先我们把ZeroClipboard.min.js引入进来。我们使用的话引入最小的包就可以了。

1

<script type="text/javascript" src="./zeroclipboard/ZeroClipboard.min.js"></script>

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

下面是一个简单的例子，点击按钮就可以吧输入框里的文字复制下来：

1

2

3

4

5

6

7

<textarea id="code8">

</textarea>

<button id="btn" data-clipboard-target="code8">复制</button>

<script type="text/javascript">

    // 定义一个复制对象

    var clip1 = new ZeroClipboard(document.getElementById("btn"));

</script>

下面是更简单的例子，直接点击文本框就可以把该文本框的内容复制下来：

1

2

3

4

5

6

<textarea id="code8">

</textarea>

<script type="text/javascript">

    // 定义一个复制对象

    var clip1 = new ZeroClipboard(document.getElementById("code8"));

</script>

如果页面上有多个元素，也不需要一个个创建复制对象，new ZeroClipboard()支持单个元素也支持集合，下面通过jquery来实现：

1

var client = new ZeroClipboard($(".copy-button"));

我们还可以直接把文本复制到剪贴板，下面例子是单击按钮时，自动把默认的文字复制到剪贴板：

1

2

3

4

5

<button id="btn">复制</button>

<script type="text/javascript">

    var client = new ZeroClipboard(document.getElementById("btn"));

    client.setData("text/plain", "这个是复制的内容");

</script>