FlashCopy在网页中添加复制功能(兼容主流的浏览器)
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2016-12-28 08:16:02
温馨提示:
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
在网页中添加复制功能目前有两种方法一种是使用flash一种中使用h5中特有的功能,这两种都有兼容性问题,也就是说有的浏览器不支持,因为觉得这个功能很实用,很多地方为啦用户方便都需要这个功能,于是就自己做啦一个
先看示例地址 :http://tool.zhaokeli.com/jslib/#flashcopy
此扩展无需引入任何第三方js库,可以直接使用,因为里面使用到啦flash所以要在服务器环境下测试(支持谷歌,火狐,ie等主流浏览器)如果环境支持h5,则优先使用h5进行复制功能
使用方法
第一种方法直接传入元素id值绑定复制
<a href="javascript:;" id="copytxt" class="btn" style="width:200px; height:100px;">点击复制1</a> <script type="text/javascript"> FlashCopy.setCopy({ domid:'copytxt', getCopyText:function(dom){ return '这是第一个要复制的数据'; }, copySuccess:function(dom,text){ console.log(dom); console.log(text+' copy ok'); } }); </script>
第二种方法通过常用的jquery库选中一系列元素绑定复制
$('.btn btn-small copybtn').each(function(index, el) { var _t = $(this); FlashCopy.setCopy({ domid: _t[0], //把jquery对象转为普通dom对象 getCopyText: function(dom) { // 在这里返回要复制的值 //dom是当前点击的元素对象 return $(dom).text(); }, copySuccess: function(dom, text) { // //复制成功后会调用参数为调用的文本 // alert(text); alert('代码复制成功'); } }); });
具体使用操作请参考上面示例手册
最新版本请到下面开源库地址下载
https://github.com/zhaokeli/FlashCopy