使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

遇到的问题:点击某个按钮复制页面中的某个对象的值

还在在做上传图片那个功能,里面有个功能是:复制图片地址的按钮

为了实现所有浏览器都兼容,网络上搜索发现人家都是用Zero Clipboard来实现复制的

 

使用ZeroClipboard解决跨浏览器复制到剪贴板的问题


Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板。

这个插件是可以实现功能的,但是感觉引用比较复杂,后来发现有jquery.zclip基于Zero Clipboard的flash实现复制,引用更简明易懂,语法跟jquery一样一样的

js插件zClip实现复制到剪贴板功能


基于jquery开发的所以html也是要先引入jquery的
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.zclip.js"></script>

然后再js代码里使用zclip
$('#copyBtn').zclip({
    path: "ZeroClipboard.swf",
    copy: function(){
         return $('#link').val();
   }
});

然后我的代码就可以实现点击复制图片地址的功能了
$(this).zclip({
	path:'__PUBLIC__/js/jquery.zclip/ZeroClipboard.swf',
	copy:function(){
		return $(this).parents('div.col-md-3').find('.img').attr('src');
	},afterCopy:function(){
						
	},
});

jquery.zclip我的备份

猜你喜欢

转载自blog.csdn.net/hbh112233abc/article/details/45821525
今日推荐