Mr. Lei

clipboard.js实现将文本复制到剪贴板
1、引用文件 引用clipboard.js文件 在线引用 <script src="https://cd...
扫描右侧二维码阅读全文
18
2019/04

clipboard.js实现将文本复制到剪贴板

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>

方法绑定在buttononclick点击事件

<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>

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

了解更全面看官方文档

Last modification:May 24th, 2019 at 12:22 pm

Leave a Comment