ZeroClipboard.js - 跨浏览器复制到剪贴板,js复制内容
开发网页的时候,如果我们需要提供复制到剪贴板的功能。可以通过ZeroClipboard.js来实现,而且可以跨浏览器。
其实现的原理是,创建一个隐藏的flash文件在页面上,然后先通过js把内容传递到这个flash里面,在通过flash把内容复制到剪贴板里面。
首先我们把ZeroClipboard.min.js引入进来。我们使用的话引入最小的包就可以了。
注意:打开ZeroClipboard.min.js,要把最后一行//# sourceMappingURL=..给删掉。这个实际使用中也不许要加载的。
下面是一个简单的例子,点击按钮就可以吧输入框里的文字复制下来:
下面是更简单的例子,直接点击文本框就可以把该文本框的内容复制下来:
如果页面上有多个元素,也不需要一个个创建复制对象,new ZeroClipboard()支持单个元素也支持集合,下面通过jquery来实现:
我们还可以直接把文本复制到剪贴板,下面例子是单击按钮时,自动把默认的文字复制到剪贴板:
更多的用法可进入官网查看:http://zeroclipboard.org/
其实现的原理是,创建一个隐藏的flash文件在页面上,然后先通过js把内容传递到这个flash里面,在通过flash把内容复制到剪贴板里面。
首先我们把ZeroClipboard.min.js引入进来。我们使用的话引入最小的包就可以了。
<script type="text/javascript" src="./zeroclipboard/ZeroClipboard.min.js"></script>
下面是一个简单的例子,点击按钮就可以吧输入框里的文字复制下来:
<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>
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>