[前端] js实现点击复制 亲测可用

来源:互联网 发布:颠覆大数据分析 pdf 编辑:程序博客网 时间:2024/06/16 04:55

首先需要一个服务器环境,我用的是wamp PHP集成服务环境,服务环境是必须的。

方案一(推荐)

使用jquery.zclip实现复制

下载:http://pan.baidu.com/s/1hqEVRik

使用:

<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery.zclip.min.js"></script>

<script>    $(function(){        $('#copy_input').zclip({            path: 'js/ZeroClipboard.swf',            copy: function(){//复制内容                return $('#mytext').val();            },            afterCopy: function(){//复制成功                $("<span id='msg'/>").insertAfter($('#copy_input')).text('复制成功');            }        });    });</script>


值得注意的是如果是复制的内容来自输入框input、textarea等,copy对象使用:

copy: function(){//复制内容    return $('#mytext').val();}

如果是复制的内容来自页面元素div、p之类的,copy对象使用:

copy: $('#mytext').text();

方案二、

下载一个复制插件( ZeroClipboard.js ),目前只能在chrome浏览器用,可以找些兼容性代码看看

选择器都是id 这里也需要注意,class不行,所以在项目中好动态生成id,记住id是不能重复的,然后就是遍历节点实现复制


demo 下载地址:

http://pan.baidu.com/s/1bnrXeXL 


代码:

<dl>    <dt><span class="copy">复制</span></dt>    <dd>hello</dd>    <dd>world</dd></dl><dl>    <dt><span class="copy">复制</span></dt>    <dd>hello2</dd>    <dd>world2</dd></dl><dl>    <dt><span class="copy">复制</span></dt>    <dd>hello3</dd>    <dd>world4</dd></dl>


var text2 = '';$('.copy').each(function(i) {    $(this).attr('id', 'copy'+i);    var clip = new ZeroClipboard.Client();        clip.setHandCursor(true);        text2= $('dl').eq(i).find('dd').text();        clip.setText(text2);                         clip.glue("copy"+i);});


设置swf 路径:

ZeroClipboard.setMoviePath('./');


demo下载




谢谢关注!


0 0
原创粉丝点击