ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)


Posted in Javascript onAugust 30, 2014

但是值得注意的是官方介绍中已明确表态说这个插件不支持ie6,下面将提供多实例化Zero Clipboard复制功能的实现及兼容ie6的写法!

先下载ZeroClipboard https://3water.com/jiaoben/24961.html

<style type="text/css">
 body { font-family:arial,sans-serif; font-size:9pt; }
 .copyit {text-align:center; border:1px solid #FD6001; background-color:#ED730B; margin:10px; padding:2px 5px; cursor:pointer; font-size:12px; border-radius:3px;}
 .copyit.hover { background-color:#FD6001;}.copyit.active { background-color:#d25102;}/*鼠标hover效果,实为调用setCSSEffects()方法*/
 .copy_info{width:260px;height:100px;border:1px solid #ccc;padding:5px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/ZeroClipboard/ZeroClipboard.js"></script>
<div class="clip_container">
<textarea id="fe_text" cols=50 rows=5 class="copycnt">第1个被复制的内容!!!</textarea>
<b class="copyit">复制内容</b>
</div>
<br/>
<div class="clip_container">
<textarea id="fe_text" cols=50 rows=5 class="copycnt">第2个被复制的内容!!!</textarea>
<b class="copyit">复制内容</b>
</div>
<script type="text/javascript">
var clip = null;
function copyThis() {
	if($.browser.version==6.0){
		//针对ie6
		$('.copyit').bind("click",function(){
		var code=$(this).parents(".clip_container").find(".copycnt").text();
		window.clipboardData.setData("Text",code);
		alert('被复制的内容:\n'+code);
	  })
	  return;
	}
	ZeroClipboard.setMoviePath("http://img.3water.com/js/scripts/clipboard.swf'");//如果ZeroClipboard.js, ZeroClipboard.swf放在同一目录下,可省略这句;
	clip = new ZeroClipboard.Client();
	$('.copyit').mouseover( function() {
	 var code=$(this).parents(".clip_container").find(".copycnt").text();
	 clip.setText(code);
	 if (clip.div) {//已创建过包含flash的父层div,则鼠标hover时重新定位flash层的位置
		 //clip.receiveEvent('mouseout', null);
		 clip.reposition(this);
	 }else{
		clip.glue(this)};
	 //clip.receiveEvent('mouseover', null);
	} );
	clip.addEventListener( 'complete', function(client, text){
	 alert("被复制内容:\n"+text);
	});
}
copyThis();
</script>
<textarea style="width:300px;height:300px;">
粘贴复制的内容到这里试试!!
</textarea>

上面的实现方法,除了ie6使用window.clipboardData.setData来实现复制功能外,其它浏览器都用Zero Clipboard 插件来实现复制功能!

使用该插件时应注意的几点:

1、以上 ZeroClipboard.js, ZeroClipboard.swf需要放在同一路径下。如果不在同一路径,可使用ZeroClipboard.setMoviePath( “Flash路径” );来设置ZeroClipboard.swf 地址。

2、setCSSEffects() 方法的解析: 当鼠标移到按钮上或点击时,由于有Flash按钮的遮挡,所以复制按钮本身体的 css “:hover”, “:active” 等伪类可能会失效。setCSSEffects() 方法就是解决这个问题。首先我们需要将伪类改成类,比如:

.copyit:hover{

 border-color:#FF6633;

}

// 需要将":hover"改成下面的".hover"

.copyit.hover{

 border-color:#FF6633;

}

3、getHTML() 方法的解析:如果你想自己实例一个Flash ,不用Zero Clipboard的附着方法,那么这个方法就可以帮上忙了。它接受两个参数,分别为Flash的宽度和高度。返回的是Flash对应的 HTML 代码。例如:
var html = clip.getHTML( 150, 20 );

Javascript 相关文章推荐
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
JS数组的赋值介绍
Mar 10 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
仿百度联盟对联广告实现代码
Aug 30 #Javascript
jQuery针对各类元素操作基础教程
Aug 29 #Javascript
jQuery事件用法实例汇总
Aug 29 #Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 #Javascript
jQuery动画特效实例教程
Aug 29 #Javascript
jQuery实用函数用法总结
Aug 29 #Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 #Javascript
You might like
php 变量未定义等错误的解决方法
2011/01/12 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
在Python中调用ggplot的三种方法
2015/04/08 Python
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
Java及python正则表达式详解
2017/12/27 Python
python中eval与int的区别浅析
2019/08/11 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
Django nginx配置实现过程详解
2020/09/10 Python
python处理写入数据代码讲解
2020/10/22 Python
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
方正Java笔试题
2014/07/03 面试题
大学生求职计划书
2014/04/30 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL