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 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
JavaScript模板入门介绍
Sep 26 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
js调用AJAX时Get和post的乱码解决方法
Jun 04 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
微信小程序实现收货地址左滑删除
Nov 18 Javascript
js实现贪吃蛇小游戏
Oct 29 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
详解如何在JS代码中消灭for循环
Dec 11 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安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
Jquery 设置标题的自动翻转
2009/10/03 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
Python实现的石头剪子布代码分享
2014/08/22 Python
Python and、or以及and-or语法总结
2015/04/14 Python
python中for语句简单遍历数据的方法
2015/05/07 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
python实现人民币大写转换
2018/06/20 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
介绍一下Java中标识符的命名规则
2014/02/03 面试题
仓管员岗位责任制
2014/02/19 职场文书
班主任班级寄语大全
2014/04/04 职场文书
倡议书格式
2014/04/14 职场文书
跑操口号
2014/06/12 职场文书
事业单位考察材料范文
2014/12/25 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
2015年超市工作总结
2015/04/09 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers