龙空技术网

分享一个将内容复制到剪贴板的JS插件-clipboard.js

虾技派 909

前言:

此刻各位老铁们对“js写入剪切板”大概比较关切,同学们都需要知道一些“js写入剪切板”的相关知识。那么小编同时在网摘上汇集了一些对于“js写入剪切板””的相关知识,希望咱们能喜欢,同学们快快来了解一下吧!

在网站开发过程中,经常需要点击复制指定内容的需求,网上搜索一下很多相关的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。所有浏览器都支持第一个,而以下浏览器支持第二个浏览器。

标签: #js写入剪切板