📌  相关文章
📜  import clipboard.js cdn - Html (1)

📅  最后修改于: 2023-12-03 15:15:48.780000             🧑  作者: Mango

使用CDN引入Clipboard.js

简介

Clipboard.js是一个简单易用的JavaScript库，它提供了复制文本到剪贴板的功能，支持跨浏览器执行复制操作，而且没有依赖关系，可直接使用CDN引入。

使用步骤
1. 引入Clipboard.js文件

在HTML文件中引入Clipboard.js文件，提供CDN链接如下：

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

或者使用unpkg的CDN链接：

<script src="https://unpkg.com/clipboard@2.0.8/dist/clipboard.min.js"></script>
2. 为需要复制的元素添加data-clipboard-text属性

例如：

<button class="btn" data-clipboard-text="复制文本内容">复制</button>
3. 初始化

在JavaScript文件中初始化Clipboard.js，可以传入一个selector或HTML元素。

var clipboard = new ClipboardJS('.btn');
4. 完成操作

根据需要使用成功或失败的回调函数。

例如：

clipboard.on('success', function(e) {
    console.log(e);
});

clipboard.on('error', function(e) {
    console.log(e);
});

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用CDN引入Clipboard.js</title>
    <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
</head>
<body>
    <button class="btn" data-clipboard-text="复制文本内容">复制</button>
    <script>
        var clipboard = new ClipboardJS('.btn');

        clipboard.on('success', function(e) {
            console.log(e);
        });

        clipboard.on('error', function(e) {
            console.log(e);
        });
    </script>
</body>
</html>
总结

使用CDN引入Clipboard.js，无需下载或安装，只需要引入一个JavaScript文件即可让网页拥有复制文本到剪贴板的功能。同时，Clipboard.js还提供了丰富的事件和选项，以适应不同的需求。