ZeroClipboard2跨浏览器复制粘贴

ZeroClipboard2是一款前端工具,能够实现在网页上一键复制文本到剪贴板的功能。本文介绍了ZeroClipboard2的工作原理、基本使用方法及与JQuery、ExtJs的结合应用,并提供了实例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

摘要:我们平时常用到的复制粘贴功能,在浏览器端,要想使用一个按钮来实现,使用原生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", "复制的文本")
});
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cj96248

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值