ZeroClipboard 复制到剪贴板
使用 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 的例子:
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){...}); | 复制开始时的事件 |
ZeroClipboard 复制到剪贴板的更多相关文章
- 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
Zero Clipboard的实现原理Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flas ...
- ZeroClipboard 插件实现文本复制到剪贴板
ZeroClipboard 的官网 点这里,github地址 点这里. 事例如下: 在引入 ZeroClipboard.js 之后, <button id="clip_button&q ...
- 复制到剪贴板的JS实现--ZeroClipboard (兼解决IE下兼容问题)
复制到剪贴板的JS实现--ZeroClipboard (兼解决IE下兼容问题) 相信绝大多数人都遇到过这样的功能实现,“复制”或者“复制到剪贴板”这样的功能.但是由于各大浏览器的实现方案不一样,导致几 ...
- 【转】js实现复制到剪贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- js实现复制到剪贴板功能,兼容所有浏览器
http://www.cnblogs.com/PeunZhang/p/3324727.html https://github.com/zeroclipboard/ZeroClipboard 复制链接到 ...
- 【转】js插件zClip实现复制到剪贴板功能
相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...
- 【原】js实现复制到剪贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- ZeroclipboardJS+flash实现将内容复制到剪贴板实例
Zeroclipboard 的实现原理 Zeroclipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash.但最新的 Flash ...
- 黄聪:JS实现复制到剪贴板功能,兼容所有浏览器(转)
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
随机推荐
- LLBL Gen + Entity Framework 程序设计入门
Entity Framework推出有好几年,除了微软的Visual Studio可以做实体框架开发外,第三方的开发工具如LLBL Gen, Devart Entity Developer也可以用来做 ...
- Quartz应用实践入门案例二(基于java工程)
在web应用程序中添加定时任务,Quartz的简单介绍可以参看博文<Quartz应用实践入门案例一(基于Web应用)> .其实一旦学会了如何应用开源框架就应该很容易将这中框架应用与自己的任 ...
- 【Android】YUV使用总结 —— Android常用的几种格式:NV21/NV12/YV12/YUV420P的区别
工作问题接触到图像这一块,需要对手机摄像头采集的原始帧做Rotate或者scale,但无奈对此的了解少之又少,于是网上搜了一顿,完事后将最近所学总结一下,以方便之后的人别踩太多坑. 首先想 ...
- 第18/24周 乐观并发控制(Optimistic Concurrency)
大家好,欢迎回到性能调优培训.上个星期我通过讨论悲观并发模式拉开了第5个月培训的序幕.今天我们继续,讨论下乐观并发模式(Optimistic Concurrency). 行版本(Row Version ...
- 前端构建:Less入了个门
一.前言 说到前端构建怎能缺少CSS预处理器呢!其实CSS的预处理器有很多啦,比较出名的有Scss.Sass.Stylus和Less.(最近还听说出现了Autoprefixer等CSS后处理器,可 ...
- 【Swift学习】Swift编程之旅---函数(十)
函数是一组用于执行特定任务的独立的代码段,你用一个名字来标识函数,这个名字是用来“调用”函数来执行它的任务. swift统一函数的语法具有足够的灵活性来表达任何一个简单的不带参数的名称与本地和外部的每 ...
- C#中简单的继承和多态
今天我们来聊一聊继承,说实话今天也是我第一次接触. 继承的概念是什么呢?就是一个类可以继承另一个类的属性和方法(成员) 继承是面向对象编程中的一个非常重要的特性. 好了,废话不多说,下面切入正题: 1 ...
- 【转载】Lucene.Net入门教程及示例
本人看到这篇非常不错的Lucene.Net入门基础教程,就转载分享一下给大家来学习,希望大家在工作实践中可以用到. 一.简单的例子 //索引Private void Index(){ Index ...
- [Asp.net 5] DependencyInjection项目代码分析
最近在研究开源代码,正好发现Asp.net5的源码,下载地址:https://github.com/aspnet. 今天主要讲的是DependencyInjection这部分,抛砖引玉,供大家参考,也 ...
- JS虚拟键盘
由于是触摸屏,所以需要一款JS虚拟键盘.上网找了一个好用的VirtualKeyboard,作了修改. 修改该插件参考的博客文章:http://www.cnblogs.com/xinggong/arch ...