clipboard.js
为什么
将文本复制到剪贴板应该不难。它不应该需要几十个步骤来配置或加载数百 KB。但最重要的是，它不应该依赖于 Flash 或任何臃肿的框架。
这就是 clipboard.js 存在的原因。
安装
你可以在 npm 上得到它。
npm install clipboard --save
或者，如果您不喜欢包管理，只需 https://github.com/zenorocha/clipboard.js/archive/master.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或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操作仅适用于或