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实现将内容复制到剪贴板实例的更多相关文章

  1. javascript 将内容复制到剪贴板

      javascript 将内容复制到剪贴板 CreateTime--2017年9月19日11:36:50 Author:Marydon js 操作剪贴板 1.设置剪贴板内容 UpdateTime-- ...

  2. js 将内容复制到剪贴板

      js 将内容复制到剪贴板 CreationTime--2018年7月1日15点06分 Author:Marydon function copyToClipboard(txt) { if(windo ...

  3. Xshell选中的同时把内容复制到剪贴板(还可以设置设置文本分隔符)

    1.设置对话框 工具 -> 选项 -> 键盘和鼠标 -> 将选定的文本自动复制到剪贴板 2.贴图如下 2.1.打开设置对话框 2.2.设置键盘鼠标,左键复制 2.3.右键粘贴 作者: ...

  4. Xshell选中的同时把内容复制到剪贴板

    1.设置对话框 工具 -> 选项 -> 键盘和鼠标 -> 将选定的文本自动复制到剪贴板 2.贴图如下 2.1.打开设置对话框 2.2.设置键盘鼠标,左键复制

  5. js将内容复制到剪贴板

    有一需求,点击按钮要将某个值复制到剪贴板. 第一种,代码如下: <div cols="20" id="biao1">12345678</div ...

  6. javascript : 点击按钮,把某标签中的内容复制到剪贴板

    需求如题. 静态页面如下. 需要的库:jquery(不用应该也能做). 浏览器:PC chrome 68 Mobile MIUI9.5(Android 7) <p>1.用电脑打开网址:&l ...

  7. Windows系统下在Git Bash中把文件内容复制到剪贴板的命令

    众所周知,在OS系统中,复制文件内容到剪贴板(比如复制公钥到剪贴板)的命令是: pbcopy < ~/.ssh/id_rsa.pub 在Win7或者Win10下这条命令就没用了.可以这样: cl ...

  8. clipboard.js实现页面内容复制到剪贴板

    clipboard.js实现复制内容到剪切板,它不依靠flash以及其他框架,应用起来比较简单 <input type="text" name="copy_txt& ...

  9. Salesforce LWC学习(二十八) 复制内容到系统剪贴板(clipboard)

    本篇参考: https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipb ...

随机推荐

  1. VS2013安装oepncv2.4.10 以及opencv 3.0.0

    Author:Maddock Date:2014.12.27 …………………………………………………………………………………………………… PS: VS2013 + OPENCV 3.0.0 的安装, ...

  2. 【JSON 注解】JSON循环引用1-----Jackson常用注解介绍 eq:@JsonIgnore

    循环引用:实体A与实体B有关系,A中有B作为字段,B中有A作为一个字段.查询A对象后,将A对象转化为JSON格式数据时,会因为序列化过程中导致A中有B字段,B字段中又有A,这样就引起了循环引用的问题! ...

  3. SpringJDBC解析3-回调函数(update为例)

    PreparedStatementCallback作为一个接口,其中只有一个函数doInPrepatedStatement,这个函数是用于调用通用方法execute的时候无法处理的一些个性化处理方法, ...

  4. 技术:使用Amazon S3接口云存储(Java版)

    http://blog.sina.com.cn/s/blog_6c7c14270102wait.html

  5. 项目新的需求,网页的自适应交付/响应式交付 Responsive/Adaptive Delivery

    网页为什么要做自适应交付,皆因现在移动设备大行其道,现在是移动互联网时代,以IOS及Android为首的各种移动终端已经遍地开花. 当人家用380px的iphone打开你的网页时,你总不能显示个102 ...

  6. spring mvc 解决后台传递值乱码问题

    在Web-xml 配置添加过滤器 <!-- 配置过滤器 解决乱码问题 --> <filter> <filter-name>CharacterEncodingFilt ...

  7. Robotium ant 报错Unable to find instrumentation info for: ComponentInfo{project/android.test.InstrumentationTestRunner}

    [echo] Running tests ... [exec] INSTRUMENTATION_STATUS: id=ActivityManagerService [exec] INSTRUMENTA ...

  8. 书摘及理解:Servlet与JSP的关系

    “Servlet是服务器端程序,它把应用逻辑嵌入到HTTP请求,在应答过程中可以直接通过PrinteWriter 输出经过逻辑处理后的动态HTML.JSP则是一种特殊的Servlet,它将Java代码 ...

  9. UpdatePanel的使用

    一.UpdatePanel的结构 <asp:ScriptManager ID="ScriptManager1" runat="server" > & ...

  10. WPF学习笔记(3):Path绘制命令zz

    WPF的XAML提供了一系列功能强大.用法复杂的 mini-language 来描述可扩展应用程序标记语言 (XAML) 中的几何路径.如下所示: XAML <Canvas>   < ...