Clipboard.js 轻松实现复制到剪切板

Question

点击复制可以说是一个很实用的小功能，比如一些下载站的资源下载地址，点击一些就复制到剪切板，然后使用迅雷或者其他下载工具下载，这个小功能对于用户来说是非常的方便，奈何在浏览器里面实现一个简单的复制到剪切板，是非常的困难的，各个浏览器之间的差异，甚至有的浏览器不同版本的迭代跟新，API 接口都不一样。

以前我一直使用 ZeroClipboard 这个插件，使用个透明的简单的 Flash 实现复制到剪切板功能，但是在手机端就不行了，大家都知道手机端是没有 Flash 插件的，这个插件基本上就不能运行了。

zeroClipboard 利用透明的 Flash 覆盖在复制按钮上，点击 Flash 将复制内容传入到 Flash 中，再通过 Flash 把传入的内容写到剪贴板上。

无意间看到有 clipboard.js 这个插件，可以实现 PC 端和手机端网页的兼容，并且还是一个开源的插件，连微信官方的 WeUI 也在使用这个插件，可见这个插件还是非常好用的。

简介

轻量级的复制到剪切板插件，不包含 Flash。体积小 gzip 压缩后仅 3kb。

为什么使用它

复制文字到剪切板不应该很难去实现。它不需要配置几十个步骤或者加载几百 KB 的文件。最重要的是，它不应该依赖 Flash 或其他臃肿的框架。

这是 clipboard.js 诞生的原因。

安装

你可以通过 npm 来安装它。

npm install clipboard --save

如果你不使用包管理，仅需要下载一个 ZIP 文件。

开始

首先，引入位于 dist 目录下的脚本文件，或者引入一个第三方CDN。

<script src="dist/clipboard.min.js"></script>

然后，你需要通过传入一个DOM 选择器, HTML 元素, 或者 HTML 元素数组作为参数，来实例化对象。

new Clipboard('.btn');

本质上，我们需要获取所有选择器匹配到的元素，并为每一个选择器设置监听事件。但仔细想想，如果有成百上千个匹配到的元素，这样做会耗费大量内存。

因此，我们使用事件代理，通过一个事件监听器来取代多个事件监听。毕竟，性能是问题。

使用

我们正在经历一场声明式的复兴，这就是为什么我们决定利用 HTML5 data 属性 来提高可用性的原因。

从另一个元素复制文本

一个很常见的用例是从另一个元素复制内容。你可以给目标元素添加一个 data-clipboard-target 属性来实现这个功能。

这个属性的值就是能匹配到另一个元素的选择器。

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

从另一个元素剪切文本

此外，你可以定义一个 data-clipboard-action 属性来指明你想要复制（copy）还是剪切（cut）内容。

如果你省略这个属性，则默认为复制（copy）。

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

正如你所预料的，剪切（cut）动作只在 <input> 或 <textarea> 元素起作用。

从属性复制文本

事实上，你甚至不需要从另一个元素来复制内容。你仅需要给目标元素设置一个 data-clipboard-text 属性就可以了。

<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

事件

如果你想要展示一些用户反馈，或者在用户复制/剪切后获取已经选择的文字，这里有个示例供你参考。

我们通过触发自定义事件，例如 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);
});

你可以访问这个网站，打开控制台，查看演示示例。

工具提示（Tooltips）

每个应用有着不同的设计需求，这是为什么 clipboard.js 没有包含任何 CSS 或内置的工具提示解决方案。

你在示例网站看到的工具提示是通过 GitHub's Primer 构建的。如果你正在寻找一个外观和体验类似的库，你可以去看看这个项目。

高级选项

如果你不想修改 HTML，我们提供了一个非常方面的命令式的 API 给你使用。你需要做的就是声明一个函数，做一些处理，并返回一个值。

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

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

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

new Clipboard('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label');
    }
});

如果在 Bootstrap 模态框（Modals）中使用，或是在其他修改焦点的类库中使用，你会希望将获得焦点的元素设置为 container 属性的值。

new Clipboard('.btn', {
    container: document.getElementById('modal')
});

同样地，如果你使用单页应用，你可能想要更加精确地管理 DOM 的生命周期。你可以清理事件以及创建的对象。

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

浏览器支持

这个库依赖于 Selection 和 execCommand 的 API。前者 兼容所有的浏览器，后者兼容以下浏览器。

42+ ✔	12+ ✔	41+ ✔	9+ ✔	29+ ✔	10+ ✔

好消息是，如果你需要支持旧浏览器，clipboard.js 可以优雅降级。你所要做的就是在 success 事件触发时提示用户“已复制！”，error 事件触发时提示用户“按 Ctrl+C 复制文字”（此时用户要复制的文字已经选择了）。

你也可以通过运行 Clipboard.isSupported() 来检查浏览器是否支持 clipboard.js，如果不支持，你可以隐藏复制/剪切按钮。

相关链接

• 官网地址：https://clipboardjs.com/
• Github 地址：https://github.com/zenorocha/clipboard.js