使用 ZeroClipboard 可以简单的将内容复制到剪贴板,通过 Adobe Flash 和 JavaScript 来实现。“Zero” 意义为这个类库没有界面,界面需要由你来建立。
- 版本:
-
ZeroClipboard v2.1.6
在线实例
实例预览 ZeroClipboard 复制到剪贴板 简单示例
使用方法
载入 JavaScript 文件
- <script src="ZeroClipboard.js"></script>
如果 ZeroClipboard.swf 与页面不在同一个目录下,可以设置路径
// 全局设置
ZeroClipboard.setDefaults({
moviePath: '/path/ZeroClipboard.swf'
});
// 参数中设置
var clip=new ZeroClipboard(document.getElementById("copy-button"), {
moviePath: '/path/ZeroClipboard.swf'
});
调用
可以传递一个元素或者一个元素数组。(这里使用 jQuery 获取元素的方式)
// 直接调用
var clip=new ZeroClipboard($('#my-button'));
AMD
如果你使用 RequireJS, curl.js, seajs 等 AMD 规范的模块加载器,那么需要设置模块的 ID 或者路径的值到 amdModuleId,才能正常使用 ZeroClipboard。例:
define(['path/to/zero-clipboard'], function(ZeroClipboard){
ZeroClipboard.setDefaults({
amdModuleId: 'path/to/zero-clipboard'
});
});
requirejs.config({
paths:{
"ZeroClipboard":"path/to/zero-clipboard"
}
});
define(["ZeroClipboard"],function(ZeroClipboard) {
ZeroClipboard.setDefaults({
amdModuleId: 'ZeroClipboard'
});
});
参数说明
- new ZeroClipboard(elements [, options])
options 参数说明
swfPath | "ZeroClipboard.swf" | Flash 文件路径,默认的 swf 文件路径与 ZeroClipboard.js 相同 |
trustedDomains | window.location.host ? [window.location.host] : [] | 可信任的域(字符串或者字符串的数组) |
cacheBust | true | |
forceEnhancedClipboard | false | |
flashLoadTimeout | 30000 | 加载 Flash 的超时时间,如果不需要,可以设置为 0。单位(ms) |
autoActivate | true | |
bubbleEvents | true | |
containerId | "global-zeroclipboard-html-bridge" | |
containerClass | "global-zeroclipboard-container" | |
swfObjectId | "global-zeroclipboard-flash-bridge" | |
hoverClass | "zeroclipboard-is-hover" | 鼠标移上时给元素增加的 Class |
activeClass | "zeroclipboard-is-active" | 选定是给元素增加的 Class |
forceHandCursor | false | |
title | null | |
zIndex | 999999999 |
参数 allowScriptAccess 选项的注意事项
1.1.7 及以下的版本,allowScriptAccess 的默认值为 always。意味着允许 "ZeroClipboard.swf" 文件托管的其他的域。为了提高安全性,1.1.7 之后的版本,allowScriptAccess 的默认值为 sameDomain,只允许 "ZeroClipboard.swf" 在相同域之下。
如果你是从 1.1.7 或更低的版本升级到 1.1.7 以上版本时,需要将 "ZeroClipboard.swf" 保存一份到相同域之下,或者设置 allowScriptAccess 的值为 always。
关于 allowScriptAccess 的更多信息,可以参考官方文档。
Data 属性
data-clipboard-target | 元素ID。查找该元素后,尝试复制元素的 .value 或 .textContent 或 .innerText 的值 |
data-clipboard-text | 默认复制的内容。 |
同时设置 data-clipboard-target 和 data-clipboard-text 两个属性时,只有在找不到 clipboard-target 的值时才会选用 clipboard-text
即使获取到 clipboard-target 的值为空,也不会选用 clipboard-text
API 方法
glue(dom) | 绑定到元素 |
reposition() | 调整位置 |
on("Event",my_load_handler) | 绑定事件 |
off("Event",my_load_handler) | 取消已绑定的事件 |
事件
通过 API 的方法 on() 来绑定
load | clip.on("load",function(client,args){...}); | Flash 加载完成时的事件。args 参数包含以下属性:
flashVersion:当前 Flash 的版本号 |
mouseover | clip.on("mouseover",function(client,args){...}); | 鼠标移入时的事件。args 参数包含以下属性:
flashVersion:当前 Flash 的版本号 altKey:是否按住 Alt 键 ctrlKey:是否按住 Ctrl 键 shiftKey:是否按住 Shift 键 |
mouseout | clip.on("mouseout",function(client,args){...}); | 鼠标移出时的事件。args 参数包含以下属性:
flashVersion:当前 Flash 的版本号 altKey:是否按住 Alt 键 ctrlKey:是否按住 Ctrl 键 shiftKey:是否按住 Shift 键 |
mousedown | clip.on("mousedown",function(client,args){...}); | 鼠标按下时的事件。args 参数包含以下属性:
flashVersion:当前 Flash 的版本号 altKey:是否按住 Alt 键 ctrlKey:是否按住 Ctrl 键 shiftKey:是否按住 Shift 键 |
mouseup | clip.on("mouseup",function(client,args){...}); | 鼠标弹起时的事件。args 参数包含以下属性:
flashVersion:当前 Flash 的版本号 altKey:是否按住 Alt 键 ctrlKey:是否按住 Ctrl 键 shiftKey:是否按住 Shift 键 |
complete | clip.on("complete",function(client,args){...}); | 成功复制内容时的事件。args 参数包含以下属性:
flashVersion:当前 Flash 的版本号 altKey:是否按住 Alt 键 ctrlKey:是否按住 Ctrl 键 shiftKey:是否按住 Shift 键 text:复制的内容 |
noflash | clip.on("noflash",function(client,args){...}); | 没有检测到 Flash 时的事件。 |
wrongflash | clip.on("wrongflash",function(client,args){...}); | Flash 版本低于要求版本时的事件。ZeroClipboard 要求 Flash 10.0.0 以上的版本。 |
dataRequested | clip.on("dataRequested",function(client,args){...}); | 复制开始时的事件 |
相关推荐
使用Jquery结合ZeroClipboard插件将制定文本复制到粘贴板
JS实现复制到剪贴板功能,使用ZeroClipboard
ZeroClipboard库提供了一个简单的方法来将文本复制到剪贴板使用一个看不见的Adobe Flash movie 和一个JavaScript接口。
NULL 博文链接:https://dodomail.iteye.com/blog/869681
Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板。
主要介绍了Zero Clipboard实现浏览器复制到剪贴板的方法,带有多个复制按钮效果,涉及jQuery插件ZeroClipboard.js具体使用步骤与相关技巧,需要的朋友可以参考下
兼容多浏览器的JavaScript脚本,以JS+FLASH的形式实现复制内容到剪贴板
Zero Clipboard、jQuery ZeroClipboard实现兼容所以浏览器的复制到剪贴板功能(由于用到flash支持,需要兼容的flash10及以下版本); 浏览demo时记得使用服务器环境,不然看不到效果的~ 搭建服务器环境的,方法有很多...
Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板
Yii2 ZeroClipboard v2.x扩展 ZeroClipboard库提供了一种使用不可见的Adobe Flash电影和JavaScript界面将文本复制到剪贴板的简便方法。 安装 安装此扩展的首选方法是通过 。 无论运行 ...
path: "${basePath}/js/bbs/invite/ZeroClipboard.swf",/* flash所在项目地址 */ copy: function(){ return $("#copyUrl").val(); }, afterCopy:function(){/* 复制成功后的操作 */ alert("复制成功!"); } ...
今天看到有个Google Code的项目,叫ZeroClipboard,大意是使用flash作为媒介,将内容复制到剪贴板。这比用纯javascript好,因为不同浏览器会出于安全的原因,有不同反应,例如IE会给出提示,有的浏览器不支持复制到...
在网站框架搭建过程,有一个功能需要实现复制文本到剪贴板,相信这个功能很常用,但是对于不常写JS代码的我来说是一个比较大的挑战,回想以前做过的一个站点,使用window.clipboardData实现复制到剪贴板功能,...
提供了一种使用不可见的Adobe Flash电影和JavaScript界面将文本复制到剪贴板的简便方法,例如GitHub所使用的。 zeroclipr R程序包是一个非常简单的程序包,它为[Shiny](http://shiny.rstudio.com/)R应用程序...
ZeroClipboard 元素内容复制-兼容各浏览器,简单易用,拿去直接即可使用,节省大家时间。 注:直接使用静态页面,不会有任何效果,需要放置在容器中,如:tomcat
两天前听了一个H5的分享,...今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能需要实现复制文本到剪贴板,相信这个功能很常用,但是对于不常写JS代码的我来说是一个比较大的挑战,回
解决浏览器兼容问题,击按钮把文本框的内容复制到剪贴板的功能 详细描述可以链接进入我的博客: http://blog.csdn.net/xiaowu108/article/details/40461225
目前,如果使用javascript来写复制到剪贴板的代码,一般都是浏览器不兼容的。所以采用flash的方式,模拟一个层,再来复制,就可以做到全部浏览器都适用哦~ 需要下载一个swf文件,和一个js文件。把这两个文件,和htm...
主要为大家详细介绍了jquery实现复制到粘贴板功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
绑定到beforecopy , copy , aftercopy和copy-error事件,使用jQuery的特殊事件API和的Core模块生成的自定义类DOM事件,用于剪贴板注入。 当用户单击绑定的元素时, copy触发beforecopy和copy事件。 尝试剪贴板...