1、引用文件

引用clipboard.js文件

在线引用

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>

2、例子

我在页面上写上一个p标签，一个button按钮，我的需求是点击button按钮就复制p标签内的文本

<p id="target">哈喽雷 - www.lxtian.cn</p>
<button data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">复制</button>

其中，button里的data-clipboard-action="copy" data-clipboard-target="#target"连个data属性必须加上
#target 为复制的目标，仔细看，我已经给p加上了id：target，所以这个位置填的id必须一致！

3、执行

<script>
    window.onload=function(){
        var clipboard = new ClipboardJS('#copy_btn');
        clipboard.on('success', function(e) {
            e.clearSelection();
            console.log("复制成功");
            alert("复制成功！");
        });
    }
</script>

测试一下，复制成功没毛病！如图：
clipboard.jpg

jquery写法

<script>
    $(document).ready(() => {
        var clipboard = new ClipboardJS('#copy_btn');
        clipboard.on('success', function(e) {
            e.clearSelection();
            console.log("复制成功");
            alert("复制成功！");
        });
    });
</script>

使用jquery别忘了引用jquery文件哦！！

完整demo：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>clipboard.js测试</title>
    <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
    <p id="target">哈喽雷 - www.lxtian.cn</p>
    <button data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">复制</button>
    <script>
    $(document).ready(function() {
        var clipboard = new ClipboardJS('#copy_btn');
        clipboard.on('success', function(e) {
            e.clearSelection();
            console.log("复制成功");
            alert("复制成功！");
        });
    });
    </script>
</body>
</html>

4、重复绑定

相信不少人使用clipboard.js是先封装起来再调用的（不是封装调用方法的可以无视后面的了），先封装再调用会出现事件重复绑定，所以请在方法用完后面加上clipboard.destroy();取消绑定

错误举例

把方法封装起来

<script type="text/javascript">
    function cp() {
        var clipboard = new ClipboardJS('#copy_btn');
        clipboard.on('success', function(e) {
            e.clearSelection();
            console.log("复制成功");
            alert("复制成功！");
        });
    }
</script>

方法绑定在button的onclick点击事件

<button onclick="cp()" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">复制</button>

复制第一次，没有问题

clipboard2.png
复制第二次，开始重复事件了

clipboard3.jpg
事件被重复执行了。。，之后的每次都会重复执行
再次强调，只要是封装起来再调用clipboard方法的
必须在方法最后添加取消事件绑定代码clipboard.destroy() 

<script type="text/javascript">
    function cp() {
        var clipboard = new ClipboardJS('#copy_btn');
        clipboard.on('success', function(e) {
            e.clearSelection();
            console.log("复制成功");
            alert("复制成功！");
            clipboard.destroy();//取消事件绑定
        });
    }
</script>

以上示例只是简单基本使用。。。

了解更全面看官方文档

© 允许规范转载