使用Clipboard.js轻松实现“复制到剪贴板”

在任何给定的网页上复制一段文本（例如段落，代码段或URL）并不罕见。为此，用户首先必须选择文本，然后使用浏览器中的菜单（上下文菜单）或键盘快捷键来复制所选内容。

但是，就UX而言，如果它可能经常发生，我们可以简化该过程。例如，在Github中，有一个按钮可以复制存储库URL。

在Bit.ly中，您会找到类似的内容来复制短URL。对于用户而言，此按钮确实非常方便，可以复制明确要复制的内容。

由于浏览器的限制，添加此类功能曾经是一个真正的麻烦。大多数开发人员不得不求助于依赖Flash的库，例如Clippy 。幸运的是，现在我们有了一个JavaScript库，使我们可以更轻松地实现它。它称为Clipboard.js ，在本入门教程中，我将教您如何有效地部署它。

安装

要将Clipboard.js安装到您的Web项目中，请下载文件，将其放在网站目录中的适当文件夹中，然后将其链接到文档中。或者，我们可以从CDN中的托管文件加载它，因此将其添加到HTML页面的底部：

<script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.4.0/clipboard.min.js"></script>

现在，我们在文档中需要两个元素。首先是保存我们要复制内容的目标。目标元素可以是例如包含短URL的input （具有ID）：

<input id="post-shortlink" value="https://ac.me/qmE_jpnYXFo">

第二个要素是触发器 。在我们的例子中，这个元素是一个按钮。触发器元素必须使用数据属性 data-clipboard-target ，其值通过其ID指向目标元素：

<button class="button" id="copy-button" data-clipboard-target="#post-shortlink">Copy</button>

这些元素放置到位后，通过在脚本标签中或单独JavaScript文件中添加Clipboard.js来打开它：

(function(){
new Clipboard('#copy-button');
})();

答对了！现在，通过单击按钮，我们应该能够在输入元素中复制缩短的URL。

进阶

在一些情况下，添加的ID，类和data-*属性到目标我们内容的元素是不可行的-处理大量旧内容以及多个目标元素时可能会发生这种情况。

举例来说，假设我们有一个网站，其内容包括段落和许多代码片段。我们将使用PrismJS ，这是一个很棒的库，用于以正确突出显示的语法显示代码。 PrismJS不带有“ copy”实用程序，因此我们决定使用Clipboard.js来实现。但是，问题是，我们在我们的网站上有数百页的内容。

这就是Clipboard.js API发挥作用的地方。

研究API

Clipboard.js呈现了两个事件， success事件和error事件，它们分别使我们能够确定它是有效复制了内容还是失败了。该error可能会在Safari中发生，因为它不支持复制/剪切 Clipboard.js所依赖的execCommand方法中的命令。

此外，这些事件还返回以下属性：

action ：返回我们针对目标元素的动作。这将返回copy或cut
text ：仅在success事件后返回。它返回已从目标元素复制或剪切的文本。
trigger ：返回触发copy或cut动作的元素。

这些API使我们能够将Clipboard.js实现到我们的内容中，而无需直接修改其包装元素。在我们的案例中，我们可以使用它们将“复制”实用程序添加到旧内容中的代码段中。

Clipboard.js + PrismJS

至此，我们应该已经安装了PrismJS（将文件下载到您的项目文件夹中，在文档中引用JavaScript）。在我们的页面标记中，每个代码段都包装在pre和code元素中，并带有language-{name}类名。在此示例中，我们使用的是LESS代码，因此我们将其添加了class language-less类，如下所示：

<pre>
<code class="language-less">@bg: transparent;
.element {
& when not (@bg = transaprent) {
background: @bg;
}
}</code>
</pre>

添加复制按钮

现在，我们必须在每个pre元素中包含一个按钮，以复制相应的代码。首先，我们使用getElementsByTagName方法选择内容，以获取内容中的所有pre标签。

var pre = document.getElementsByTagName('pre');

我们最有可能有两个或两个以上pre内容中的标签，所以我们通过每一个需要循环pre ，我们已经选择。

for (var i = 0; i < pre.length; i++) {
}

在for循环中，添加以下行以包含按钮。

for (var i = 0; i < pre.length; i++) {
var isLanguage = pre[i].children[0].className.indexOf('language-');
if ( isLanguage === 0 ) {
var button           = document.createElement('button');
button.className = 'copy-button';
button.textContent = 'Copy';
pre[i].appendChild(button);
}
}

让我们回顾一下代码。我们首先验证是否有一个添加了language-前缀类的code元素。如果不是这种情况，我们将不包含该按钮。

因此，我们将按钮添加到pre元素中。每个按钮都设置有一个类， copy-button和“复制”文本，如下所示：

<pre>
<code class="language-less">@bg: transparent;
.element {
&amp; when not (@bg = transparent) {
background: @bg;
}
}</code>
<button class="copy-button">Copy</button>
</pre>

现在，它应该在每个代码段中都可见：

运行剪贴板

现在我们运行Clipboard，因此每个按钮都通过将目标元素设置为相对于触发器.copy-button的上一个元素来复制代码。在我们的例子中，该元素是code 。

var copyCode = new Clipboard('.copy-button', {
target: function(trigger) {
return trigger.previousElementSibling;
}
});

现在，我们可以使用按钮了。单击按钮时，它应该复制代码段。但是，让我们通过使用自定义事件来走得更远。

使用自定义事件

让我们想象一下，我们希望使用户的复制体验更具交互性。当用户单击按钮并成功复制代码后，我们希望将按钮文本从“复制”更改为“已复制”。为此，添加以下内容：

copyCode.on('success', function(event) {
event.clearSelection();
event.trigger.textContent = 'Copied';
window.setTimeout(function() {
event.trigger.textContent = 'Copy';
}, 2000);
});

上面的代码执行三件事：

首先，我们使用剪贴板中的clearSelection()实用程序功能清除复制内容区域内的选择。添加此项是可选的。
然后我们将内容设置为“复制”
最后，我们在两秒钟后将其恢复为“复制”。

在不支持execCommand的错误情况下（例如在Safari中，在撰写本文时），我们将按钮文本更改为“按“ Ctrl + C”进行复制” 。添加以下代码：

copyCode.on('error', function(event) {
event.trigger.textContent = 'Press "Ctrl + C" to copy';
window.setTimeout(function() {
event.trigger.textContent = 'Copy';
}, 2000);
});

而已！现在，我们有一个功能齐全的交互式复制按钮。我们剩下的任务是为按钮设置样式，但我将完全由您自己决定。

结语

Clipboard.js是一个方便JavaScript库，它使将复制实用程序添加到网页的复杂性大大降低。在本教程中，我们研究了基础知识，然后研究了一些高级知识，包括公开的API和自定义事件。

Clipboard.js依赖于Selection和execCommand，因此它只能在支持以下两种方法的浏览器中运行：Chrome 42，Firefox 41，Internet Explorer 9和Opera9。如上所述，Safari用户很不走运。

最后，希望您喜欢本教程，并且不要忘记该演示。

翻译自: https://webdesign.tutsplus.com/tutorials/copy-to-clipboard-made-easy-with-clipboardjs--cms-25086