clipboard.js:将文本复制到剪贴板
clipboard.js可让您轻松将文本复制到剪贴板。压缩后大小为 3kb,无需 Flash,这是一种非常轻量级的方式,可让您的访问者复制您网站上的文本和代码。
安装
安装方式npm
:
npm install clipboard --save
或者从 Github 获取包并将 clipboard.min.js 文件手动放在您的项目文件夹中。
然后在结束 </body> 标签之前包含 JavaScript 文件:
<script src="path/to/clipboard.min.js"></script>
最后,您需要实例化它。在下面的 JQuery 示例中,我们将实例化所有具有以下类的元素的对象clipboard
:
$( document ).ready(function() {
var clipboard = new Clipboard('.clipboard');
});
用法
要使用它,请使用data-clipboard-text
数据属性:
<button class="clipboard"
data-clipboard-text="This will be copied">
Copy this
</button>
或者使用data-clipboard-target
数据属性:
<span id="copy">This text will be copied</span>
处理错误
使用成功和错误自定义事件轻松处理成功和错误状态:
$( document ).ready(function() {
clipboard.on('success', function(e) {
$(e.trigger).text("Copied!");
e.clearSelection();
setTimeout(function() {
$(e.trigger).text("Copy");
}, 2500);
});
注意CTRL+C
:某些浏览器不支持 clipboard.js 正常工作所需的 execCommand API。文本仍将被选中,因此一个好的解决方法是在触发错误事件时显示一条消息,告知用户点击。