文档章节

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
博文 411
码字总数 65170
作品 0
程序员
Zero Clipboard-js复制到剪切板(支持多浏览器)

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

mickelfeng
2014/01/22
0
0
【js】js访问剪切板(兼容各大浏览器)唯一解决方案ZeroClipboard.swf

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

666B
2014/08/12
0
0
javascript 实现跨浏览器的粘贴,复制,剪切功能(转)

这两天在做跨浏览器的粘贴、复制、剪切功能。 本以为是很简单的事,原来并不简单。 网上查了很多资料。都是跨浏览器把文本复制到剪切板的实现方案(zero clipboard.js)。没有跨浏览器粘贴的...

苏叶晚晚
2012/09/26
0
0
TypeError: window.clipboardData is undefined

问题:javascript实现复制到剪切板,用ff浏览器显示TypeError: window.clipboardData is undefined 原来clipboardData只能ie存在,在谷歌和火狐下clipboardData为null...

macker
2015/01/08
0
2
jquery+flash(zclip)实现点击复制到剪切板

jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题。jQuery-zclip插件需要Flash的支持,使用时记得电脑安装Adobe Flash Player。 ...

东子
2014/09/20
0
2

没有更多内容

加载失败,请刷新页面

加载更多

String ,  StringBuffer ,  StringBuilder的区别

String , StringBuffer , StringBuilder的区别 String 首先,String 是用来表示一个字符串常量的,它是一个不可变对象,意味着,一旦我们创建了某个字符串之后,就不能再改变它的值了,我们可...

tsmyk0715
51分钟前
2
0
区块链100讲:UTXO 和 Account 模型对比

在当前区块链世界中,主要有两种记录保存方式,UTXO 模式(Unspent Transaction Output) 和 Account 模式。Bitcoin 采用的是 UTXO 模型,Ethereum 采用的 Account 模型,同样 CITA 也采用了 ...

HiBlock
53分钟前
1
0
Vue中路由管理器Vue Router使用介绍(三)

一、路由定义添加动态参数定义 1.路由定义项,使用:xx 方式 定义动态参数 { path:'/user/:id/:name', name:'user', component:()=>import('./views/User.vue') ...

tianma3798
54分钟前
1
0
从ibdata文件恢复mysql数据

DROP TABLE 恢复【一】 Recover InnoDB dictionary Percona Data Recovery Tool 单表恢复

IT--小哥
57分钟前
1
0
常见设计模式UML图

常见设计模式UML图 本文主要总结常见的设计模式的UML图,方便查阅和思考。 创建型模式 简单工厂模式、工厂方法模式、抽象工厂模式、建造者模式和单例模式,这五种设计模式主要处理对象的创建...

陶小陶
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部