clipboard.js：将文本复制到剪贴板

clipboard.js允许您轻松地将文本复制到剪辑板. 在3kb gzipped和不需要Flash,这是一个很好的轻量级的方式,允许您的访问者在您的网站上复制文本和代码。

安装

用npm安装:

1npm install clipboard --save

或者从 Github 获取包,并将 clipboard.min.js 文件手动放入您的项目文件夹。

然后在关闭标签之前包括 JavaScript 文件:

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

在下面的JQuery示例中,我们正在对所有元素的对象进行实例化,使用一个类 clipboard:

1$( document ).ready(function() {
2  var clipboard = new Clipboard('.clipboard');
3});

使用

要使用它,要么使用data-clipboard-text数据属性:

1<button class="clipboard"
2   data-clipboard-text="This will be copied">
3  Copy this
4</button>

或者使用data-clipboard-target数据属性:

1<span id="copy">This text will be copied</span>

处理错误

使用成功和错误自定义事件轻松处理成功和错误状态:

1$( document ).ready(function() {
2  clipboard.on('success', function(e) {
3    $(e.trigger).text("Copied!");
4    e.clearSelection();
5    setTimeout(function() {
6      $(e.trigger).text("Copy");
7    }, 2500);
8  });

<$>[注] 注:某些浏览器不支持clipboard.js所需的execCommand API,以便其正常工作。文本仍会被选中,因此一个好的解决方案是显示一个信息,告诉用户在触发错误事件时按CTRL+C。