js如何实现点击复制链接

研究了好久，请看一下代码：

   function copyUrl(){
     var ele = document.getElementById("url");
     ele.select();
     document.execCommand("Copy");
     alert("复制链接成功！");
    }

测试了一下是有兼容性问题的，只适合web浏览器，ios并不管用，最后考虑用插件

1.ZeroClipboard 使用flash优雅降级 果断放弃

2.Clipboard 比较好 很轻量

如下代码：

js引入：

<script type="text/javascript" src="__PUBLIC__/Acenter/lib/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="__PUBLIC__/js/clipboard.min.js"></script>

HTML：

<textarea id="url" cols="32" value="<?php echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>" style="margin:.5rem;border:1px solid #ddd"><?php echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?></textarea>
 <button id="copyUrl" data-clipboard-target="#url" data-clipboard-action="copy" style="margin-bottom:.6rem;border:none;">复制链接</button>

javascript:

var clipboard = new Clipboard('#copyUrl');    
        clipboard.on('success', function(e) {    
            layer.alert("复制成功");    
            e.clearSelection();    
            console.log(e.clearSelection);    
        });
 clipboard.on('error', function(e) {
           alert("当前浏览器不支持此功能，请手动复制。")
   });

效果图：

注意事项：文章中的红色部分要使用textarea或者input  以及button标签来实现，其他标签不行

 

clipboard.min.js下载地址请前往：http://sucai.gxyourui.cn/Home/Article/blog_detail/article_id/56.html