clipboard.js：最轻便的复制页面内容到剪切板的JS

Denis

发布于 2023-04-14 11:29:31

2.5K0

发布于 2023-04-14 11:29:31

最近在做一个项目的时候，需要实现一个功能就是点击一个按钮，将内容复制到剪贴板。传统的复制页面内容到剪切板主要方法是通过 Flash，但是在现代浏览器中，Flash 逐渐没落，慢慢被淘汰，搜索了一圈，发现 clipboard.js 是目前实现该功能最轻便的工具。

clipboard.js 的使用方法

clipboard.js 只有3kb大小，无需 Flash，兼容所有现代浏览器，但是经过测试不支持微信内置浏览器。

使用还算简单，简单几步就搞定，下面简单介绍下clipboard.js的使用方法：

1. 首先下载或者使用CDN的资源：

<script type='text/javascript' src="https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.js"></script>

2. 初始化 clipboard 对象

<script type='text/javascript'>
var clipboard = new Clipboard('.btn');
</script>

3. 定义要复制的对象和点击按钮

<!-- Target -->

<div id="foo">我爱水煮鱼是最好的博客</div>
<!-- Trigger -->
<a class="btn"  href="javascript:" data-clipboard-target="#foo" rel="noopener noreferrer">复制</a>

如果是剪切，加上属性：

data-clipboard-action="cut"

如果复制的文字是隐藏的，可以通过 data-clipboard-text 定义到点击的按钮上

clipboard.js 的演示

我爱水煮鱼是最好的博客复制

clipboard.js 的事件

有时候我们需要一些用户反馈，在初始化对象的时候可以定义 success 和 error 两个事件：

var clipboard = new Clipboard('.btn');

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

clipboard