FlashCopy在网页中添加复制功能(兼容主流的浏览器)

来源:赵克立 分类: 前端设计 标签:js特效js函数发布时间:2016-12-27 20:53:57浏览:153
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。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



微信号:kelicom QQ交流群:215861553
点击更换验证码
留言