clipboard.js实现复制链接功能

2019-01-29 本文已影响0人 xingxixi

现有的常用方案有两种：
　　一：使用原生javascript中window.clipboardData实现复制到剪贴板功能；
　　二：使用Zero Clipboard库；

方案一仅支持ie浏览器，在firefox,chrome浏览器上则不起作用。
方案二ZeroClipboard是一个用于剪贴板复制的 JS 插件，它是基于 Flash 来实现跨浏览器的复制功能的，所以只支持安装了flash的浏览器。在现代浏览器中，flash逐渐没落，firefox浏览器默认不开启flash，所以Zero Clipboard在兼容方面也表现不佳。
那么，对于复制到剪切板这种简单的操作有没有一种实现简单，兼容性良好的解决方案呢？
有的！那就是github上的开源项目clipboard.js，它不需要依靠flash以及其他框架（但不支持IE8及以下浏览器）。下面举例使用clipboard实现复制当前元素链接功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>target-div</title>
</head>
<body>
    <!-- 1. Define some markup -->
<button id="copyUrl" data-clipboard-target="#copyUrl" data-clipboard-action="copy" onClick="copyUrl()" class="btn btn-white btn-xs">复制链接</button>

    <!-- 2. Include library -->
    <script src="../dist/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard -->
    <script>
        function copyUrl(){
            var layer = layui.layer;
             var _val=document.location.href;
             console.log(document.location.href);
          var clipboard = new ClipboardJS('#copyUrl', {
            text: function() {
                   layer.alert('复制成功！', {icon: 1});
                   return _val;
              }
        });
        }
    </script>
</body>
</html>

我们只需下面四步：
1.引入clipboard.min.js文件；
2.选择一个可以确定被拷贝元素的选择器，本例中使用用的是基本的标签选择器<div>，当然也可以使用id选择器 class选择器等等；
3.定义一个button按钮，注意按钮的属性：
　　data-clipboard-action="copy" data-clipboard-target="div"
　　其中data-clipboard-target属性就是第二步你定义的选择器
4.书写js,建立clipboard对象以及复制后执行的方法。
OK,这样功能就完成了，点击按钮后就会发现div的内容已经拷贝到剪切板了。

注意：使用中var clipboard = new Clipboard('#copyUrl');出现了错误提示Uncaught ReferenceError: Clipboard is not defined，原因为Clipboard2.0版本应使用var clipboard=new ClipboardJS('#copyUrl');

解决Clipboard.js点击两次才能复制成功的问题
点击函数里手动增加一次点击，代码如下：

        function copyUrl(){
            layui.use('layer', function () {
                var layer = layui.layer;
                var clipboard = new ClipboardJS('#copyUrl', {
                    text: function() {
                        return window.location.href;
                    }
                });
                clipboard.on("success", function(e) {
                    console.log("ok");
                    layer.msg("复制成功",{icon:1, time: 1000});
                    clipboard.destroy();
                });
                clipboard.on("error", function(e) {
                    console.log("fail");
                });
                document.getElementById('copyUrl').click();  //解决clipboard二次点击生效问题
                clipboard.destroy();

            });
        }

clipboard.js实现复制链接功能

猜你喜欢

热点阅读