使用ZeroClipboard 复制指定内容到剪切板
有些时候,我们希望让用户在网页上完成某个操作就能自动将指定的内容复制到用户计算机的剪贴板中。但是出于安全原因,大多数现代浏览器都未提供通用的剪贴板复制接口(或即便有,也默认被禁用)。只有IE浏览器可以通过如下方式来进行复制。
window.clipboardData.setData("Text", "这里是需要复制的文本内容")
想要实现跨浏览器的复制功能,我们就可以使用 ZeroClipboard。
ZeroClipboard 及其原理介绍
ZeroClipboard 是国外大神开发的一个用于剪贴板复制的 JS 插件,它是基于 Flash 来实现跨浏览器的复制功能的。当我们使用 ZeroClipboard 的时候,它会悄悄隐藏一个小小的 Flash 影片(swf),不会对我们的用户界面造成影响。我们只需要借助它实现复制功能就行了。ZeroClipboard 中的 "Zero" 指的就是"不可见,零干扰"。
不过从 Flash 10开始,由于浏览器和Flash的安全限制,要求用户必须在Flash区域上进行真实操作才能操作剪贴板。于是,ZeroClipboard 的作者想到一个办法:它将 Flash 做成透明的,以便于我们放在诸如链接、按钮等需要放置的任何地方。这样,用户界面看起来没有变化,当点击链接或按钮时,实际上点击是却是 Flash,从而实现复制操作。
ZeroClipboard 快速入门
使用 ZeroClipboard 的方法非常简单,我们只需要在页面中引入它的一个JS文件并稍作配置(最简单只需一行代码)即可(实际上还需要引入一个Flash的swf文件,不过 ZeroClipboard 会自动引入它)。
请参考下面的示例代码:
注意:这里介绍的是目前最新版 ZeroClipboard 2.1.6 的用法,2.x 版本均可参考,但 1.x 的用法与此并不相同!
ZeroClipboard 2.x 原则上不兼容IE 6 ~ IE 8等低版本IE浏览器,如果需要兼容IE 6 ~ IE 8,请使用 1.x 或者 2.0.2 版本(详情可以参考下方评论中的官方链接),推荐使用 2.0.2 版本。
此外,由于 Flash 本地沙箱的安全限制,以下代码如果是在本地HTML文件中被浏览器直接打开,将无法正常工作。在这里提供一个资源不错的CDN库(http://www.bootcdn.cn/),在这里可以找到我们想要使用的ZeroClipboard2.0.2版本。以下是bootcdn中ZeroClipboard链接:http://cdn.bootcss.com/zeroclipboard/2.0.2/ZeroClipboard.min.js
<!-- 这里是HTML代码部分,使用ZeroClipboard必须要有一个数据源,这个数据源可以是文本框,可以是div,或其它正确的HTML标签 -->
<textarea id="content" rows="10" cols="60">这里是需要复制的内容</textarea>
<input id="copy" type="button" data-clipboard-target="content" value="复制"> <!-- 这里是JS代码部分 -->
<script type="text/javascript" src="http://cdn.bootcss.com/zeroclipboard/2.0.2/ZeroClipboard.min.js" ></script>
<script type="text/javascript">
// 将【复制】按钮充当复制数据的元素载体
var clip = new ZeroClipboard( document.getElementById("copy") );
</script>
以上就是引入并使用 ZeroClipboard 的最简代码。我们为【复制】按钮指定了data-clipboard-target
属性,其值为将被复制数据的元素id。此时,我们点击【复制】按钮就可以复制id为content的textarea中的文本数据。你可以点击这里 运行代码
ZeroClipboard 重要事项
关于文件引入和本地化使用
上面我们引入的JS文件是 ZeroClipboard 官方提供的 CDN,你可以直接使用。如果你想将其下载到本地服务器上使用,你可以进入官方网站下载最新版本。然后将dist目录下的ZeroClipboard.js
(或者压缩版的ZeroClipboard.min.js)和ZeroClipboard.swf
这两个文件上传到自己的服务器即可。
请确保它们被放在同一目录下,以便于 ZeroClipboard.js 自动加载 ZeroClipboard.swf 文件。否则你需要在使用前额外配置swf文件的路径。
// 在 new ZeroClipboard()之前,需要先配置 ZeroClipboard.swf 文件的路径
ZeroClipboard.config( { swfPath: 'http://YOURSERVER/path/ZeroClipboard.swf' } );
多个复制载体
如果你希望在页面中有多个按钮、链接等元素充当复制数据的载体,你可以以数组(或类数组)形式传入多个元素。以下几种方式都是可以的:
// 方式一 (生成多个ZeroClipboard对象,适合不同载体复制不同来源的数据)
var clip = new ZeroClipboard( document.getElementById("copy") );
var clip2 = new ZeroClipboard( document.getElementById("copy2") ); // 方式二 (生成一个ZeroClipboard对象,适合不同载体复制相同来源的数据)
var doms = [ document.getElementById("copy"), document.getElementById("copy2") ];
// var doms = document.getElementsByName("copy"); // 通过ByName或ByTagName获取多个元素也是可以的
// var doms = $(".copy"); // 通过jQuery对象也是可以的
// 只要是通过length属性访问元素个数、通过数字索引来访问DOM元素的对象都是可以的
var clip = new ZeroClipboard( doms );
更改复制载体
如果之前你使用【按钮1】来充当复制载体,现在你想添加【按钮2】来充当复制载体。你可以调用 ZeroClipboard 实例的clip()
方法:
var clip = new ZeroClipboard( document.getElementById("copy") );
// 添加id为copy2的元素作为复制载体,原来id为copy的元素依然可用
clip.clip( document.getElementById("copy2") /* 也可以数组形式传入多个 */ );
如果你想要卸载指定的复制载体,你可以使用unclip()
方法。
// 取消id为copy2的元素上注册的复制功能
clip.unclip( document.getElementById("copy2") /* 也可以数组形式传入多个 */ ); // 不指定任何参数,则取消该对象之前在所有元素上注册的复制功能
clip.clip();
设置用于复制的文本数据
如果指定了data-clipboard-target
属性,ZeroClipboard 将依次尝试通过该元素的value、textContent、innerText属性来获取文本数据(依次判断是否有上述属性,并以最靠前的属性为准)。
当然,ZeroClipboard 也并非只能通过其他元素才能获得用于复制的文本数据,我们还可以给复制载体自身的data-clipboard-text
属性来设置用于复制的文本数据,之后你还可以通过设置该属性值(setAttribute())来更改需要复制的文本内容。
<input id="copy" type="button" data-clipboard-text="这里是用于复制的内容,CodePlayer" value="复制">
此外,我们甚至无需通过元素节点的属性来设置用于复制的文本数据,我们可以直接使用 ZeroClipboard 对象的setText()
方法来设置文本数据。注意,该方法设置的数据是一次性的,使用该方法设置复制数据后,只在下一次复制操作时生效。之后即使你点击复制按钮也不再执行复制,除非你再次调用setText()
方法(你可以绑定复制("copy")事件来调用该方法,从而实现每次复制操作都设置数据,下面我们会讲到)。
clip.setText("设置用于复制的文本内容");
数据来源的优先级问题:如果我们同时为复制载体设置了data-clipboard-text
、 data-clipboard-target
属性,并调用了setText()
方法,那么 ZeroClipboard 复制数据的优先级是:setText() > data-clipboard-target > data-clipboard-text。
如果前者没有文本数据(没有调用、 没有属性或者数据为空字符串),则以下一个优先级为准,如果都没有文本数据,则不复制。
举例来说,如果同时设置上述三者。第一次复制:先取setText()
设置的数据,如果为空字符串,则取data-clipboard-target
对应元素的数据;如果它也为空字符串,则取data-clipboard-text
属性的文本数据;如果它也为空字符串,则不复制。注意,由于setText()
设置的数据是一次性的,下一次复制将以data-clipboard-target
属性为准(除非再次调用setText()
方法)。
数据类型
众所周知,剪贴板中的数据是有类型的,每一种类型都可以有自己的数据。我们复制的数据可以有多种类型,当我们粘贴的时候,会粘贴当前程序可接受类型的数据。
ZeroClipboard也支持设置多种类型的剪贴板数据。它为我们提供了setText()、setHtml、setRichText()方法分别用于设置纯文本数据、HTML内容、富文本内容。
// 可同时设置,粘贴时根据接收程序的不同,而粘贴出不同的内容
clip.setText("CodePlayer");
clip.setHtml("<strong>CodePlayer</strong>");
clip.setRichText("{\\rtf1\\ansi\n{\\b CodePlayer}}");
此外,ZeroClipboard还提供了一个通用的设置方法setData()
,用于设置各种类型的数据。
// 可同时设置,粘贴时根据接收程序的不同,而粘贴出不同的内容
clip.setData("text/plain", "CodePlayer");
clip.seData("text/html", "<strong>CodePlayer</strong>");
clip.setData("application/rtf", "{\\rtf1\\ansi\n{\\b CodePlayer}}");
事件处理
ZeroClipboard 还为我们提供了事件支持,以便于处理ZeroClipboard触发的各种事件。ZeroClipboard支持的事件有"ready"、 "beforecopy"、 "copy"、 "aftercopy"、 "destroy"、 "error"。
我们可以通过on()
方法来注册事件处理函数。
// 当Flash SWF文件加载完成并准备就绪时触发ready事件
clip.on("ready", function(){ alert("加载完成!"); }); // 当触发copy事件时,设置用于复制的文本数据
clip.on("copy", function(e){
e.clipboardData.setData("text/plain", "这里是用于复制的纯文本数据")
});
此外,off()
方法用来取消注册的事件处理函数,emit()
方法用来手动触发事件。其用法与jQuery的on()、 off()、 trigger()方法非常相似。
此外,如果你有多个ZeroClipboard对象,你想为它们都注册事件处理函数。你可以使用全局对象ZeroClipboard的静态方法ZeroClipboard.on()
、 ZeroClipboard.off()
、ZeroClipboard.emit()
来全局性地设置事件。全局事件将对每个对象都生效。
关于事件处理的详细用法,请参考ZeroClipboard事件及其属性细节。
使用ZeroClipboard 复制指定内容到剪切板的更多相关文章
- 使用clipboard.js复制页面内容到剪切板
最近在做一个的智能客服Web端浏览器应用,其中有一项需求是客户在获取系统返回的 答案后点击“复制答案”按钮将答案复制到系统剪切板.本以为这是一个小case,但是发现如果 要对各种主流浏览器都有良好的兼 ...
- js实现复制文本内容到剪切板
function copyUrl() { var Url2=document.getElementById("url").innerText; var oInput = docum ...
- Shell——Linux/Mac 终端复制文件内容到剪切板
pbcopy < filename 如: pbcopy < README.md 效果如下: 说明:上图中 # gitskills 即README.md 中内容.
- 一段js实现复制文本内容到剪切板
<script type="text/javascript"> function copyUrl2() { var Url2=document.getElementBy ...
- js+flash(as3)实现复制文字内容到剪切板实例
/* SWFObject v2.2 swfobject.js */ var swfobject=function(){var D="undefined",r="objec ...
- js拷贝指定内容到剪切板
function copyTextToClipboard(text) { var textArea = document.createElement("textarea"); te ...
- windows 复制 文本文件内容 到剪切板
shell 打开 type filename | clip
- js复制内容到剪切板
注意第一部分的内容不兼容Safari,全兼容的请使用第二部分方法 第一部分 查看demo请点 这里. 原生js复制指定内容到剪切板,超简单的实现方式, 实现思路如下: 1.创建一个input,把想要 ...
- JS禁止右键查看源码,禁止复制,复制内容到剪切板
有时候我们希望自己的网页源码不被查看,这时需要关掉鼠标的右击事件;有时候我们也希望禁止选择页面内容Ctrl+C复制. 1.禁止右键查看源码; <script> //设置右键事件 funct ...
随机推荐
- Flask 上传下载文件
上传文件示例代码 #encoding:utf8 from werkzeug.utils import secure_filename from flask import Flask,render_te ...
- IPv4分类
IPv4地址按逻辑层次分为五类 A类 保留给政府机构 A类地址第1字节为网络地址,其它3个字节为主机地址.它的第1个字节的第一位固定为0. A类地址网络号范围:1.0.0.0 - 126.0.0.0 ...
- ZXing生成二维码、读取二维码
使用谷歌的开源包ZXing maven引入如下两个包即可 <dependency> <groupId>com.google.zxing</groupId> & ...
- ASP.NET LinqDataSource数据绑定后,遇到[MissingMethodException: 没有为该对象定义无参数的构造函数。]问题。
问题出现的情形:LinqDataSource数据绑定到DetailsView或GridView均出错,错误如下: “/”应用程序中的服务器错误. 没有为该对象定义无参数的构造函数. 说明: 执行当前 ...
- kafka中的配额管理(限速)机制
kafka支持配额管理,从而可以对Producer和Consumer的produce&fetch操作进行流量限制,防止个别业务压爆服务器.本文主要介绍如何使用kafka的配额管理功能. 1 K ...
- 仿简书MarkDown编辑器可同步滚动
模仿简书的MarkDown编辑器,使用Angular8写的示例 1.支持同步滚动 编辑的过程中,右侧预览界面会同步滚动.滚动右侧预览界面,左侧编辑区也会同步滚动哦 2.支持语法高亮 如下: using ...
- [LeetCode] 769. Max Chunks To Make Sorted 可排序的最大块数
Given an array arr that is a permutation of [0, 1, ..., arr.length - 1], we split the array into som ...
- Nginx - 安装并启动Nginx
1 - 安装Nginx 官网步骤:http://nginx.org/en/linux_packages.html#RHEL-CentOS [Anliven@h202 ~]$ sudo vim /etc ...
- mysql 更新与查询(排序 分组 链接查询)
UPDATE更新 #每一次数据的更新都需要update UPDATE 命令修改 MySQL 数据表数据的通用 SQL 语法: UPDATE table_name SET field1=new-valu ...
- [转帖]Zookeeper
Zookeeper https://www.cnblogs.com/zhang-qc/p/8877082.html Zookeeper其实是一种为分布式应用所设计的高可用.高性能且一致的开源协调服 ...