文档章节

JS 实现复制到剪切板

Jack088
 Jack088
发布于 2016/06/17 15:33
字数 74
阅读 43
收藏 2

这里输入引用文本<!DOCTYPE html>

<html> <head> <title>ZeroClipboard Test</title> <meta charset="utf-8"> <style type="text/css"> .line{margin-bottom:20px;} /* 复制提示 */ .copy-tips{position:fixed;z-index:999;bottom:50%;left:50%;margin:0 0 -20px -80px;background-color:rgba(0, 0, 0, 0.2);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#30000000, endColorstr=#30000000);padding:6px;} .copy-tips-wrap{padding:10px 20px;text-align:center;border:1px solid #F4D9A6;background-color:#FFFDEE;font-size:14px;} </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.zclip.js"></script> </head> <body> <div class="line">

demo1 点击复制当前文本

    点击复制我

</div> <div class="line">

demo2 点击复制表单中的文本

    点击复制单中的文本     <input type="text" class="input" value="输入要复制的内容" />

</div> </body> </html> <script type="text/javascript"> $(document).ready(function(){ /* 定义所有class为copy标签,点击后可复制被点击对象的文本 */     $(".copy").zclip({         path: "ZeroClipboard.swf",         copy: function(){         return $(this).text();         },         beforeCopy:function(){/* 按住鼠标时的操作 */             $(this).css("color","orange");         },         afterCopy:function(){/* 复制成功后的操作 */             var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>☺ 复制成功</div></div>");             $("body").find(".copy-tips").remove().end().append($copysuc);             $(".copy-tips").fadeOut(3000);         }     }); /* 定义所有class为copy-input标签,点击后可复制class为input的文本 */     $(".copy-input").zclip({         path: "ZeroClipboard.swf",         copy: function(){         return $(this).parent().find(".input").val();         },         afterCopy:function(){/* 复制成功后的操作 */             var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>☺ 复制成功</div></div>");             $("body").find(".copy-tips").remove().end().append($copysuc);             $(".copy-tips").fadeOut(3000);         }     }); }); </script>

ps: 需要在服务器环境下运行才有效果

http://pan.baidu.com/s/1o8pfU22

© 著作权归作者所有

共有 人打赏支持
Jack088
粉丝 41
博文 423
码字总数 65170
作品 0
程序员
私信 提问
Zero Clipboard-js复制到剪切板(支持多浏览器)

在前端开发中经常会遇到这样的问题,要求用js将输入框或者div中的内容复制到剪切板。在ie下可以通过clipboardData.setData来实现,但是这个方法却不能兼容其他的浏览器。显然这种方法在这个浏...

mickelfeng
2014/01/22
0
0
Chrome下如何用读写剪切板数据

RT。 我想用 KindEditor 作为编辑器,通过点击页面上的一个按钮,将剪切板中的数据复制到 KindEditor 中并自动进行处理,采用JavaScript,然后再以HTML格式复制到剪切板上! 如果只考虑Chrom...

XAXXXXXXX
2012/10/13
3.6K
3
关于JS实现复制到剪切板的方法

Web开发过程中有如下需求: 将点击图片将图片复制到剪切板,或者将文字复制到剪切板。 网上多复制到剪切板的实现方式主要有: 1. zclip(但是只支持ID选择器,我的需求是页面上动态的内容需要...

白与黑
2014/08/27
4.7K
3
无需 Flash 使用 jQuery 复制文字到剪贴板

如果在网上找一个关于如何将一段特定的文本拷贝到剪贴板的解决方案,最可能的结果就是使用Flash的方案来做这个事,虽然使用Flash可以很好地解决这个问题,但是这不是一个明智的想法,因为这个...

oschina
2016/03/12
11.5K
13
【js】js访问剪切板(兼容各大浏览器)唯一解决方案ZeroClipboard.swf

需求描述: 通过JS实现将页面中的某个元素的数据复制到剪切板上。 需求分析: 要用JS实现最大的问题就是浏览器的兼容性问题了。而且最大的问题还是浏览器出于安全型的考虑,所以像chrome,F...

666B
2014/08/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Android :报错Your project path contains non-ASCII characters.

报错内容如下 Your project path contains non-ASCII characters. This will most likely cause the build to fail on Windows. Please move your project to a different directory. See ht......

lanyu96
3分钟前
0
0
[LintCode] Number of Islands(岛屿个数)

描述 给一个01矩阵,求不同的岛屿的个数。 0代表海,1代表岛,如果两个1相邻,那么这两个1属于同一个岛。我们只考虑上下左右为相邻。 样例 在矩阵: [ [1, 1, 0, 0, 0], [0, 1, 0, 0, ...

honeymose
4分钟前
0
0
Nginx平滑添加模块

Nginx已经编译安装并运行了一段时间, 然后某一天, 发现需要用到某个模块但当初没有编译, 这个时候怎么办呢? 卸载重新安装肯定可以的, 如果Nginx版本没有变更的话, 则有一个相对平滑的方法来添...

老菜鸟0217
9分钟前
0
0
spark安装测试

spark安装测试 由于本地已经安装好hadoop相关组件,所以本文是在yarn的基础上对spark进行安装及测试 确保hdfs及yarn成功启动,hadoop版本为2.7.3 安装scala,由于本人安装的spark是2.4.0,对应...

-九天-
22分钟前
3
0
周末看完了《电能计量自动化技术》

整体质量还行,下面分别将心得记录如下: 第一章:发展历程可以看看,现在算是智能电网阶段 2:讲主站系统。以文件进行各模块的交互很值得思考,尤其是批量数据,多团队合作的情况下。另外线...

max佩恩
42分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部