clipboard.js复制功能实现

最新推荐文章于 2023-02-02 16:09:18 发布

原创最新推荐文章于 2023-02-02 16:09:18 发布 · 283 阅读

0 ·

CC 4.0 BY-SA版权

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

10 篇文章

订阅专栏

7 篇文章

订阅专栏

本文介绍了一个用于前端开发的轻量级插件clipboard.js，该插件可以轻松地将文本复制到剪贴板中。文中提供了两个示例：一个是简单的复制按钮实现；另一个展示了如何动态设置复制目标或复制文本。

前言

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()
    }
});