在任何给定的网页上复制一段文本（例如段落，代码段或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 {
& 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