clipboard.js

将文本复制到剪贴板的现代方法

没有Flash，没有框架，压缩后只有 3kb

为什么

将文本复制到剪贴板应该不难。它不需要数十个步骤来配置或数百 KB 来加载。但最重要的是，它不应该依赖于 Flash 或任何臃肿的框架。

这就是 clipboard.js 存在的原因。

安装

你可以在 npm 上得到它。

npm install clipboard --save

或者，如果您不熟悉包管理，只需下载一个 ZIP 文件。

设置

引用：

首先，包含位于 dist 文件夹中的脚本或从第三方 CDN 提供商加载它。

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

现在，您需要通过传递 DOM 选择器、HTML 元素或 HTML 元素列表来实例化它。

new ClipboardJS('.btn');

在内部，我们需要获取与您的选择器匹配的所有元素并为每个元素附加事件侦听器。但猜猜怎么了？如果您有数百个匹配项，则此操作会消耗大量内存。

出于这个原因，我们使用事件委托，它用一个监听器替换多个事件监听器。毕竟，#perfmatters。

ES6：

import * as Clipboard from 'clipboard'
new Clipboard('.btn');

用法

我们生活在声明式复兴中，这就是为什么我们决定利用 HTML5 数据属性来提高可用性。

从另一个元素复制文本

一个非常常见的用例是从另一个元素复制内容。您可以通过在触发器元素中添加 data-clipboard-target 属性来做到这一点。

您在此属性中包含的值需要与另一个元素选择器匹配。

复制

<!-- Target -->
<input "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。

Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga.

如您所料，剪切操作仅适用于 <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 ClipboardJS('.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);
});

对于现场演示，只需打开您的控制台 console :)

工具提示

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

您在此演示站点上看到的工具提示是使用 GitHub 的 Primer 构建的。如果您正在寻找类似的外观和感觉，您可能需要检查一下。

高级用法

如果您不想修改 HTML，那么有一个非常方便的命令式 API 供您使用。你需要做的就是声明一个函数，做你的事，然后返回一个值。

例如，如果要动态设置目标，则需要 target 一个 Node.js。

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

如果要动态设置 text，您将返回一个字符串。

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

为了在 Bootstrap Modals 或任何其他改变焦点的库中使用，您需要将焦点元素设置为 container 值。

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

此外，如果您正在使用单页应用程序，您可能希望更精确地管理 DOM 的生命周期。以下是清理我们创建的事件和对象的方法。

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

浏览器支持

这个库依赖于 Selection 和 execCommand API。所有浏览器都支持第一个，而以下浏览器支持第二个。

Chrome 42+

Edge 12+

Firefox 41+

IE 9+

Opera 29+

Safari 10+

好消息是，如果您需要支持旧版浏览器，clipboard.js 会优雅地降级。您所要做的就是显示一个工具提示，上面写着 Copied! 当调用 success 事件时，在调用 error 事件时按 Ctrl+C 复制，因为文本已被选中。

您还可以通过运行 ClipboardJS.isSupported() 检查是否支持 clipboard.js，这样您就可以从 UI 中隐藏复制/剪切按钮。