前言：
今天兄弟们对“clipboardjs”大致比较关注，兄弟们都需要剖析一些“clipboardjs”的相关资讯。那么小编同时在网上收集了一些对于“clipboardjs””的相关资讯，希望同学们能喜欢，我们一起来学习一下吧！在网站开发过程中，经常需要点击复制指定内容的需求，网上搜索一下很多相关的JS复制代码，但兼容性都很差，很多浏览器都不支持。
虾技派找到一款非常好用的复制插件分享给大家。
clipboard.js是一个不依赖 Flash,将文本复制到剪贴板的插件，仅仅 2kb。
为什么有clipboard.js
将文本复制到剪贴板应该不难。它不应该需要数十个步骤来配置或数百个KB来加载。但最重要的是，它不应该依赖于Flash或任何臃肿的框架。
这就是剪贴板存在.js的原因。
开始使用
下载clipboard.js页面引用
<script src="dist/clipboard.min.js"></script>
或者直接引用cdn的
<script src=";></script>
现在，您需要通过传递DOM选择器， HTML元素或HTML元素列表来实例化它。
new ClipboardJS('.btn');实例：<button class="btn" data-clipboard-text="这里是要被复制的内容">点击复制</button>
事件：
如果我们需要一些反馈，比如点击复制时弹出提醒
<button class="btn-copy" data-clipboard-text="这里是要被复制的内容">点击复制</button><script>var clipboard = new ClipboardJS('.btn-copy');clipboard.on('success', function(e) { alert('已经复制到剪切版');});clipboard.on('error', function(e) { console.log('复制失败');}); </script>高级用法：如果您不想修改HTML，可以使用一个非常方便的命令性API。您需要做的就是声明一个函数，执行您的操作，然后返回一个值。
例如，如果要动态设置 ，则需要返回 Node。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();浏览器支持此库依赖于Select和execCommand API。所有浏览器都支持第一个，而以下浏览器支持第二个浏览器。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #clipboardjs
