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

首先需要一个服务器环境，我用的是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下载

谢谢关注！