您的位置：首页 > Web前端 > JavaScript

ZeroClipboard2跨浏览器复制粘贴

2016-07-24 21:13 459 查看
摘要：我们平时常用到的复制粘贴功能，在浏览器端，要想使用一个按钮来实现，使用原生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", "复制的文本")
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript 浏览器复制粘贴
相关文章推荐
新的分享
章节导航