ZeroclipboardJS+flash实现将内容复制到剪贴板实例

时间:2023-03-09 02:00:46
ZeroclipboardJS+flash实现将内容复制到剪贴板实例

Zeroclipboard 的实现原理
Zeroclipboard 利用 Flash
进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash。但最新的 Flash Player 10 只允许在
Flash 上进行操作才能启动剪贴板。所以 Zero Clipboard 对此进行了改进,用了一个透明的 Flash
,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就可以使用 Flash 的复制功能了。

如何使用 Zeroclipboard
首先下载 Zeroclipboard,并解压缩。其中需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf ,将这两个文件放入到你的项目中。

其次,该效果只能放在服务器上后才能看到,所以,你可以在你的PC的IIS中建立一个虚拟的项目即可。

效果如下:

ZeroclipboardJS+flash实现将内容复制到剪贴板实例

话不多说,直接上代码:

引用:

<script src="jquery.min.js"></script>
<script src="jquery.ZeroClipboard.js"></script>

HTML code:

<input type="text" id="txt" class="txt" />
<input type="button" value="点击复制" id="copy" class="copy" data-clipboard-target="txt" />

JS code:

<script>
$(function(){
//复制URL
var clip = new ZeroClipboard(document.getElementById("copy"),{
moviePath: "ZeroClipboard.swf"
}); //复制成功
clip.on('complete', function(client, args){
//args.text
alert("已经复制到剪贴板");
});
})
</script>

点击下载ZeroclipboardJS+flash实现将内容复制到剪贴板实例DEMO