clipboard.js复制功能实现

最新推荐文章于 2020-03-26 17:20:41 发布

老贼大魔王

最新推荐文章于 2020-03-26 17:20:41 发布

阅读量212

点赞数

分类专栏： js 前端开发

本文链接：https://blog.csdn.net/qq_36637705/article/details/81333820

版权

前端开发同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

前言

clipboard.js是前端实现复制文本到剪贴板的插件，简单记录一下使用方法。

具体使用

1.简单的demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <script src="../js/clipboard.min.js"></script>
    <script>
        var clipboard = new Clipboard('.btn');

        clipboard.on('success', function(e) {
            alert('复制成功！');
        });

        clipboard.on('error', function(e) {
            console.log(e);
        });
    </script>
</head>
<body>
    <div id="msg">hello world</div>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#msg">Copy</button>
</body>
</html>

copy可以用cut。

2.简单的例子
如果你希望动态设置 target，你需要返回一个节点（Node）

new Clipboard('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling;
    }
});

如果你希望动态设置 text，你需要返回一个字符串。

new Clipboard('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label');
        //return $("#msg").val()
    }
});

老贼大魔王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
clipboard.js复制功能实现

前言clipboard.js是前端实现复制文本到剪贴板的插件，简单记录一下使用方法。具体使用1.简单的demo&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;测试页面&lt;/title&gt; &lt;sc
复制链接

扫一扫

专栏目录