摘要：我们平时常用到的复制粘贴功能，在浏览器端，要想使用一个按钮来实现，使用原生js代码来实现，是困难的，幸好ZeroClipboard的出现，解决了这一尴尬的问题。

ZeroClipboard2简介

在前端页面设计时，按钮常常伴随着数据的提交或重置出现。然而某一次，需求是点击按钮，将后台展示在页面的特定内容复制到剪切板，这样用户就省去了选中文字并按Crtl+C的操作。这使我有机会接触并使用到了一款好的工具：ZeroClipboard2。
ZeroClipboard2实现原理很简单：利用透明的 flash 覆盖在复制按钮上，点击 flash，将复制内容传入到 flash 中，再通过 flash 把传入的内容写到剪贴板上。
ZeroClipboard2使用方法也简单粗暴：把 flash 和 js 放到同一路径下，然后引用 js 即可。

ZeroClipboard2简单应用

先看一个例子，了解一下最简单的ZeroClipboard2使用：
可能用到的工具
- ZeroClipboard2.2.0
- Eclipse 4.5
- Tomcat 7
- JQuery 1.7.2
- ExtJs

如下 clip.html

<!DOCTYPE HTML>
<html >
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/><title>ZeroClipboard 测试</title>
</head>
<body>文本：<input type="text" name="txt" id="content" value="要复制的内容" /><button id="copy" data-clipboard-target="content">copy</button><br /><br />粘贴：<input type="text">
</body>
</html>
<script type="text/javascript" src="js/ZeroClipboard.js"></script>
<script type="text/javascript" >
window.onload = function(){var clip = new ZeroClipboard(document.getElementById("copy"));
};
</script>

项目的骨架：

使用时需要引入ZeroClipboard2所需要的文件ZeroClipboard.js和ZeroClipboard.swf文件，建议将其放入一个目录下。
代码中用到的data-clipboard-target属性是为了指定要复制内容的id，ZeroClipboard 将依次尝试通过该元素的value、textContent、innerText属性来获取文本数据，将content的数据绑定到id为copy的button上。
由于 Flash 本地沙箱的安全限制，以上代码如果是在本地HTML文件中被浏览器直接打开，将无法正常工作。我是用Tomcat运行的，而且如果是Eclipse默认方式打开的页面，也是不能工作的，需要在本地浏览器中打开。

在chrom中打开：

点击copy,在粘贴栏中Ctrl+v,即可看到效果：

ZeroClipboard2与JQuery ：

实际使用时，我们很少将js代码与html代码放在一起，而是引入js文件,可能还会用到JQuery。
改进 clip.html

<!DOCTYPE HTML>
<html >
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/><title>ZeroClipboard 测试</title>
</head>
<body>文本：<input type="text" name="txt" id="content" value="要复制的内容" /><button id="copy" data-clipboard-target="content">copy</button><br /><br />粘贴：<input type="text">
</body>
</html>
<script type="text/javascript" src="js/ZeroClipboard.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/demo.js"></script>

引入的demo.js

$(document).ready(function(){var clip = new ZeroClipboard($("#copy"));
});

项目的骨架：

ZeroClipboard2与ExtJs：

在生产环境中，我们使用的是ExtJs。在这个过程中，最难控制的就是何时初始化ZeroClipboard，因为ExtJs的按钮是在后期生成的，我不能很容易的添加诸如data-clipboard-target属性的方法告诉ZeroClipboard去复制什么内容，也没有一个很清楚的位置去写new ZeroClipboard()这样的逻辑，那么该如何处理呢？

ExtJs 应该在适当的位置初始化ZeroClipboard
在使用ExtJS创建button时，常常使用如下方法：

Ext.onReady(function(){
var buttonName = new Ext.Button({id:"buttonName",renderTo:Ext.getBody(),  minWidth:100,   handler:function(){   Ext.MessageBox.show({   title: '提示' ,  msg: '你点击了我！' ,  buttons: Ext.MessageBox.OK ,fn: function(){}});  }  });
});

那么在初始化button时，就应该考虑初始化ZeroClipboard。你可以在浏览器的console中查看初始化是否完成。
- 在页面加载完成以后，在浏览器中应该存在ZeroClipboard对象。
- 使用自带方法查看：ZeroClipboard.state()

- 如果一切顺利，可以看到ZeroClipboard.state().flash.ready的值为true.

使用ZeroClipboard自带的复制方法
有时候，我们无法给button设置data-clipboard-target属性，可以使用ZeroClipboard自带的复制方法绑定数据。

其中setText()是最简单且常用的方法

var clip = new ZeroClipboard($("#copy"));
clip.setText($("#content").val());
//可以设置3中格式，带有格式的内容粘贴到不同的程序，显示对应的效果
clip.setText("复制的内容");
clip.setHtml("<p>复制的内容</p>");
clip.setRichText("{\\rtf1\n{\\b 复制的内容}}");

还有一种通用的设置方法setData()

clip.setData("text/plain", "复制的内容");
clip.seData("text/html", "<p>复制的内容</p>");
clip.setData("application/rtf", "{\\rtf1\n{\\b 复制的内容}}");

ZeroClipboard2第一次复制不生效：

在ZeroClipboard2与ExtJs结合使用时，我发现，每次复制的第一次不生效，需要点击第二下复制按钮，才能实现复制效果。在琢磨之后发现，我在绑定数据的时候使用的是setText()方法，而该方法设置的数据是一次性的，使用该方法设置复制数据后，只在下一次复制操作时生效。之后即使你点击复制按钮也不再执行复制，除非你再次调用setText()方法。
解决这个问题，我们在button的回调函数中使用了的事件copy,改用setData()方法：

clip.on("copy", function(e){e.clipboardData.setData("text/plain", "复制的文本")
});

ZeroClipboard2跨浏览器复制粘贴相关推荐

ZeroClipboard跨浏览器复制粘贴
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>ZeroClipboard跨浏览器复制粘贴</title ...
使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Fla ...
AE图片跨软件复制粘贴扩展脚本 Copy Pasta for Mac 破解版
Copy Pasta for Mac 破解版是一款ae图片跨软件复制粘贴扩展插件,可以快速复制当前帧图片到剪切板,粘贴到任意软件:如AI,PS,ID等软件,当然也可以复制到QQ,而且可以在浏览网页,右 ...
Excel表格中如何快速跨表复制粘贴，将表1数据一键复制到表2、表3、表4
Excel表格中如何快速跨表复制粘贴,将表1数据一键复制到表2.表3.表4 目录 Excel表格中如何快速跨表复制粘贴,将表1数据一键复制到表2.表3.表4 1.按住Shift键选中工作表2.表3.表 ...
浏览器复制粘贴以及手机端webview复制粘贴
一.浏览器赋值粘贴 1.document.execCommand 这部分参考文档: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/ ...
监听浏览器复制粘贴事件开箱即用的复制到剪切板
监听键盘ctrl+c ctrl+v area.onkeydown = (event) => { if (event.ctrlKey) {if (event.keyCode == 67) {ale ...
在VMware中安装新版Ubuntu后，无法跨虚拟机复制粘贴和拖拽文件的解决方法
首先确保已经安装了VMware Tools: sudo apt install open-vm-tools 然后发现还是不能复制粘贴和拖拽文件?原因是Ubuntu(22.04,20.04等)默认启用了 ...
电脑复制粘贴_ALTC 让电脑和手机能“跨屏”互相复制粘贴的免费工具！
很多用过 Mac + iPhone 的同学都知道苹果系列产品间有一个叫做"连续互通"功能,其中跨设备的「通用剪贴板」简直超级无敌好用! 这功能可以让你无论在电脑端复制文字换到手机粘 ...
实现Ubuntu与Windows之间的复制粘贴
默认情况下的Ubuntu和Windows之间是无法实现跨系统复制粘贴的解决方法: 第一步:打开Ubuntu命令终端第二步,卸载已有的工具:sudo apt-get autoremove open- ...

ZeroClipboard2跨浏览器复制粘贴