ZeroclipboardJS+flash实现将内容复制到剪贴板实例
Zeroclipboard 的实现原理
Zeroclipboard 利用 Flash
进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash。但最新的 Flash Player 10 只允许在
Flash 上进行操作才能启动剪贴板。所以 Zero Clipboard 对此进行了改进,用了一个透明的 Flash
,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就可以使用 Flash 的复制功能了。
如何使用 Zeroclipboard
首先下载 Zeroclipboard,并解压缩。其中需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf ,将这两个文件放入到你的项目中。
其次,该效果只能放在服务器上后才能看到,所以,你可以在你的PC的IIS中建立一个虚拟的项目即可。
效果如下:

话不多说,直接上代码:
引用:
<script src="jquery.min.js"></script>
<script src="jquery.ZeroClipboard.js"></script>
HTML code:
<input type="text" id="txt" class="txt" />
<input type="button" value="点击复制" id="copy" class="copy" data-clipboard-target="txt" />
JS code:
<script>
$(function(){
//复制URL
var clip = new ZeroClipboard(document.getElementById("copy"),{
moviePath: "ZeroClipboard.swf"
}); //复制成功
clip.on('complete', function(client, args){
//args.text
alert("已经复制到剪贴板");
});
})
</script>
点击下载ZeroclipboardJS+flash实现将内容复制到剪贴板实例DEMO
ZeroclipboardJS+flash实现将内容复制到剪贴板实例的更多相关文章
- javascript 将内容复制到剪贴板
javascript 将内容复制到剪贴板 CreateTime--2017年9月19日11:36:50 Author:Marydon js 操作剪贴板 1.设置剪贴板内容 UpdateTime-- ...
- js 将内容复制到剪贴板
js 将内容复制到剪贴板 CreationTime--2018年7月1日15点06分 Author:Marydon function copyToClipboard(txt) { if(windo ...
- Xshell选中的同时把内容复制到剪贴板(还可以设置设置文本分隔符)
1.设置对话框 工具 -> 选项 -> 键盘和鼠标 -> 将选定的文本自动复制到剪贴板 2.贴图如下 2.1.打开设置对话框 2.2.设置键盘鼠标,左键复制 2.3.右键粘贴 作者: ...
- Xshell选中的同时把内容复制到剪贴板
1.设置对话框 工具 -> 选项 -> 键盘和鼠标 -> 将选定的文本自动复制到剪贴板 2.贴图如下 2.1.打开设置对话框 2.2.设置键盘鼠标,左键复制
- js将内容复制到剪贴板
有一需求,点击按钮要将某个值复制到剪贴板. 第一种,代码如下: <div cols="20" id="biao1">12345678</div ...
- javascript : 点击按钮,把某标签中的内容复制到剪贴板
需求如题. 静态页面如下. 需要的库:jquery(不用应该也能做). 浏览器:PC chrome 68 Mobile MIUI9.5(Android 7) <p>1.用电脑打开网址:&l ...
- Windows系统下在Git Bash中把文件内容复制到剪贴板的命令
众所周知,在OS系统中,复制文件内容到剪贴板(比如复制公钥到剪贴板)的命令是: pbcopy < ~/.ssh/id_rsa.pub 在Win7或者Win10下这条命令就没用了.可以这样: cl ...
- clipboard.js实现页面内容复制到剪贴板
clipboard.js实现复制内容到剪切板,它不依靠flash以及其他框架,应用起来比较简单 <input type="text" name="copy_txt& ...
- Salesforce LWC学习(二十八) 复制内容到系统剪贴板(clipboard)
本篇参考: https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipb ...
随机推荐
- hdu 4049 2011北京赛区网络赛J 状压dp ***
cl少用在for循环里 #include<cstdio> #include<iostream> #include<algorithm> #include<cs ...
- Alcatraz安装 不能用解决方案
1.安装 1>Github上下载Alcatraz,下载地址:https://github.com/supermarin/Alcatraz 2>Alcatraz是xcode的插件,这个插件 ...
- Linux学习笔记(1)Linux虚拟机安装过程中的知识点及常用管理工具
1. VMware的相关知识 (1)建议的VMware的配置: CPU 主频1GHz以上 内存 1GB以上 硬盘 分区空闲空间8GB以上 (2)VMware创建快照 快照的作用是保存虚拟机的现有状态, ...
- 【maven】 pom.xml详解
pom.xml详解 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...
- MOB 短信验证
工具/原料 Android Studio mob SDK中的jar 和.so文件 方法/步骤 1 把3个jar 放入libs 并添加依赖 在项目的build.gradle里面 在你的项 ...
- MPAndroidChart饼图属性及相关设置
公司最近在做统计功能,所以用到了饼图,在网上查了一些资料最终决定使用MPAndroidChart,使用起来非常方便,还有一些问题通过各种查找,终于解决...废话不多说,先看下效果图: 布局文件: &l ...
- LoadRunner常见函数分析
LoadRunner常见函数分析 ?%Ze\N%?~"_J}.t051Testing软件测试网;FQ X%L|GO+R Web用户Action51Testing软件测试网b,Q8iO w1j ...
- js高级技巧之高级定时器
实际上,浏览器负责进行排序,指派某段代码在某个时间点运行的优先级. 可以吧js想象成在时间线上运行的. JavaScript中没有任何代码是立刻执行的,但一旦进程空闲则尽快执行. 1.重复的定时器: ...
- favicon的制作
在head中插入如下标签: <link rel="shortcut icon" href="favicon.ico" />.然后把图标命名为favi ...
- express-9 Handlebars模板引擎(2)
视图和布局 视图通常表现为网站上的各个页面(它也可以表现为页面中AJAX局部加载的内容,或一封电子邮件,或页面上的任何东西).默认情况下,Express会在views子目录中查找视图.布局是一种特殊的 ...