ZeroClipboard 复制到剪贴板

使用 ZeroClipboard 能够简单的将内容复制到剪贴板,经过 Adobe Flash 和 JavaScript 来实现。“Zero” 意义为这个类库没有界面,界面须要由你来创建。html

在线实例

实例预览 ZeroClipboard 复制到剪贴板 简单示例web

使用方法

载入 JavaScript 文件

  1. <script src="ZeroClipboard.js"></script>
复制

若是 ZeroClipboard.swf 与页面不在同一个目录下,能够设置路径

  1. // 全局设置 
  2. ZeroClipboard.setDefaults({ 
  3.   moviePath: '/path/ZeroClipboard.swf' 
  4. }); 
  5.  
  6. // 参数中设置 
  7. var clip=new ZeroClipboard(document.getElementById("copy-button"), { 
  8.   moviePath: '/path/ZeroClipboard.swf' 
  9. }); 
复制

调用

能够传递一个元素或者一个元素数组。(这里使用 jQuery 获取元素的方式)api

  1. // 直接调用 
  2. var clip=new ZeroClipboard($('#my-button')); 
复制

AMD

若是你使用 RequireJScurl.jsseajs 等 AMD 规范的模块加载器,那么须要设置模块的 ID 或者路径的值到 amdModuleId,才能正常使用 ZeroClipboard。例:数组

  1. define(['path/to/zero-clipboard'], function(ZeroClipboard){ 
  2.   ZeroClipboard.setDefaults({ 
  3.     amdModuleId: 'path/to/zero-clipboard' 
  4.   }); 
  5. }); 
复制
或者设置路径,RequireJS 的例子:
  1. requirejs.config({ 
  2.   paths:{ 
  3.     "ZeroClipboard":"path/to/zero-clipboard" 
  4.   } 
  5. }); 
  6.  
  7. define(["ZeroClipboard"],function(ZeroClipboard) { 
  8.   ZeroClipboard.setDefaults({ 
  9.     amdModuleId: 'ZeroClipboard' 
  10.   }); 
  11. }); 
复制

参数说明

  1. 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。dom

关于 allowScriptAccess 的更多信息,能够参考官方文档curl

Data 属性

名称 说明
data-clipboard-target 元素ID。查找该元素后,尝试复制元素的 .value 或 .textContent 或 .innerText 的值
data-clipboard-text 默认复制的内容。

同时设置 data-clipboard-target 和 data-clipboard-text 两个属性时,只有在找不到 clipboard-target 的值时才会选用 clipboard-textrequirejs

即便获取到 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){...}); 复制开始时的事件
相关文章
相关标签/搜索