clipboard.js将文本复制到剪贴板的Javascript库
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。
使用
我们正处于_声明式编程的复兴_时期，因此我们决定利用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>正如您所料，“剪切”操作仅适用于<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 构建的。如果您想要类似的外观和体验，可以尝试一下 Primer。
高级选项
如果您不想修改 HTML，可以使用非常方便的命令式 API。您只需声明一个函数，执行相应的操作，然后返回一个值即可。
例如，如果您想动态设置“target”，则需要返回一个 Node。
new ClipboardJS('.btn', {
target: function (trigger) {
return trigger.nextElementSibling;
},
});如果您想动态设置“文本”，您将返回一个字符串。
new ClipboardJS('.btn', {
text: function (trigger) {
return trigger.getAttribute('aria-label');
},
});为了在 Bootstrap Modals 或任何其他改变焦点的库中使用，您需要将焦点元素设置为“容器”值。
new ClipboardJS('.btn', {
container: document.getElementById('modal'),
});另外，如果您正在使用单页应用，您可能需要更精确地管理 DOM 的生命周期。以下是如何清理我们创建的事件和对象。
var clipboard = new ClipboardJS('.btn');
clipboard.destroy();许可证
MIT 许可证 © Zeno Rocha