Clipboard-一键复制内容

说明

将文本复制到剪贴板不应该很难。它不需要几十个步骤来配置或加载数百个KB。但最重要的是,它不应该依赖于Flash或任何臃肿的框架。 这就是clipboard.js存在的原因。移步官网(https://clipboardjs.com/

安装

点击此处下载文件即可。

建立

首先,包含位于dist文件夹中的脚本或从第三方CDN提供商加载它。

1
<script src="dist/clipboard.min.js"></script>

现在,您需要通过传递DOM选择器,HTML元素或HTML元素列表来实例化它。

1
new ClipboardJS('.btn');

在内部,我们需要获取与您的选择器匹配的所有元素,并为每个元素添加事件侦听器。但猜猜怎么了?如果您有数百个匹配项,则此操作可能会消耗大量内存。 出于这个原因,我们使用事件代理,它只用一个监听器来代替多个事件监听器。毕竟,#perfmatters。

用法

我们生活在一个_声明式的复兴中_,这就是为什么我们决定利用HTML5数据属性以获得更好的可用性。

从另一个元素复制文本

一个很常见的用例是从另一个元素复制内容。你可以通过data-clipboard-target在触发器元素中添加一个属性来实现。 您在此属性上包含的值需要与其他元素选择器匹配。

1
2
3
4
5
6
7
<!-- 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则会默认使用。

1
2
3
4
5
6
7
<!-- 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动作只适用于<input><textarea>元素。

从属性复制文本

事实是,你甚至不需要其他元素来复制它的内容。你可以data-clipboard-text在你的触发器元素中包含一个属性。

1
2
3
4
<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>

活动

有些情况下您想要显示一些用户反馈或捕获复制/剪切操作后选择的内容。 这就是为什么我们会发起自定义事件,比如successerror您来倾听并实现您的自定义逻辑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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);
});

对于现场演示,只需打开您的控制台:)  

高级用法

如果你不想修改你的HTML,你可以使用一个非常方便的命令API。所有你需要做的是声明一个函数,做你的事情,并返回一个值。 例如,如果你想动态设置一个target,你需要返回一个节点。

1
2
3
4
5
new ClipboardJS('.btn', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});

如果你想动态设置一个text,你会返回一个String。

1
2
3
4
5
new ClipboardJS('.btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label');
}
});

为了在Bootstrap Modals或任何其他改变焦点的库中使用,您需要将聚焦元素设置为container值。

1
2
3
new ClipboardJS('.btn', {
container: document.getElementById('modal')
});

另外,如果您正在使用单页面应用程序,则可能需要更精确地管理DOM的生命周期。以下是清理我们创建的事件和对象的方法。

1
2
var clipboard = new ClipboardJS('.btn');
clipboard.destroy();
  • 版权声明: 本博客所有文章,未经许可,任何单位及个人不得做营利性使用!转载请标明出处!如有侵权请联系作者。
  • Copyrights © 2015-2023 翟天野

请我喝杯咖啡吧~