前端页面复制粘贴插件Clipboard的使用

最新推荐文章于 2025-10-17 14:11:26 发布

原创最新推荐文章于 2025-10-17 14:11:26 发布 · 3.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Clipboard

本文介绍如何利用clipboard.js插件实现网页上的文本复制功能。通过简单的三步操作——引入JS文件、编写HTML代码及初始化插件，即可让用户轻松复制页面上的文本内容。

clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中

1、引入JS文件：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

2、HTML代码

<input name="content" id="content" value="这里是需要复制的内容">
<button class="btn btn-sm btn-purple" id="copybtn" data-clipboard-action="copy" data-clipboard-target="#content">复制</button>

3、JS代码初始化插件

<script>
    var clipboard = new ClipboardJS('#copybtn');
        clipboard.on('success', function(e) {
            alert('复制成功');
        });

        clipboard.on('error', function(e) {
            alert('复制失败');
        });
    </script>