[前端] 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下载

 

欢迎关注技术开发分享录：http://fenxianglu.cn/