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




谢谢关注!


没有更多推荐了,返回首页