README

现代复制到剪贴板。无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。

使用方法

我们现在正经历一个声明式复兴，这就是我们决定利用HTML5数据属性来提高可用性的原因。

从另一个元素复制文本

一个非常常见的用例是从另一个元素复制内容。您可以通过在触发元素中添加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。

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

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

如您所料，剪切操作仅在<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);
});

要查看实时演示，请访问此网站并打开您的控制台。

工具提示

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

您在演示网站上看到的提示是通过使用 GitHub 的 Primer 构建的。如果您正在寻找类似的外观和感觉，您可能想了解一下。

高级选项

如果您不想修改您的 HTML，有一个非常实用的命令式 API 供您使用。您只需要声明一个函数，做您的事情，然后返回一个值。

例如，如果您想动态设置一个 target，您需要返回一个节点。

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。第一个 API 在所有浏览器中都受到支持，而第二个 API 在以下浏览器中受到支持。

好消息是，如果您需要支持旧浏览器，clipboard.js 会有序地降级。您只需要在 success 事件被调用时显示提示信息 已复制！，当 error 事件被调用（因为文本已经被选择）时显示 按 Ctrl+C 复制。

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

额外内容

一个浏览器扩展，它为 GitHub、MDN、Gist、StackOverflow、StackExchange、npm，甚至是 Medium 上的每个代码块添加了一个“复制到剪贴板”按钮。

在 Chrome 和 Firefox 上安装。

zenorocha / clipboardjs

维护者

详细信息