剪贴板插件clipboard.js

将文本复制到剪贴板的现代化方法。没有Flash。没有框架只有3kb的gzip压缩

为什么使用clipboard.js

将文本复制到剪贴板不应该很困难。它不应该需要几十个步骤配置或数百个KB来加载。但最重要的是，它不应该依赖于Flash或任何blo肿的框架。

这就是clipboard.js存在的原因。

安装

你可以在npm找到它。

npm install clipboard --save   或者直接下载：https://github.com/zenorocha/clipboard.js/archive/master.zip

建立

首先，包括dist文件夹中的脚本或从第三方CDN提供程序加载它。

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

newClipboard('.btn');

用法

1)copy

<input id='foo' value="https://github.com/zenorocha/clipboard.js.git">

<button class="btn" data-clipboard-target="#foo">
      <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

2)cut 

data-clipboard-action属性，以指定是否要使用任何内容copy或cut内容。

如果省略此属性，copy默认情况下将被使用。

<textarea id="bar">Mussum ipsum cacilds...</textarea>

<button class="btn"data-clipboard-action="cut"data-clipboard-target="#bar">
      Cut to clipboard
</button>

该cut操作只适用于input 或者 textarea 元素。

3）从属性复制文本

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

4) 反馈

在某些情况下，您希望显示一些用户反馈或捕获复制/剪切操作后选择的内容。

这时候就可以触发自定义事件，比如success和error并实现自定义的逻辑。

varclipboard =newClipboard('.btn');
clipboard.on('success',function(e){
       成功代码
});
clipboard.on('error',function(e){
       失败代码
});

5) 高级用法

如果您不想修改HTML，那么有一个非常方便的使用API​​。所有你需要做的是声明一个函数，做你的事情，并返回一个值。

例如，如果要动态设置target，则需要返回一个节点。

new Clipboard('.btn', { target: function(trigger) {
        return trigger.nextElementSibling; // return node
}});

如果你想动态设置一个text，你将返回一个String。

new Clipboard('.btn', {text:function(trigger){
       returntrigger.getAttribute('aria-label');// return text
}});

清理我们创建的事件和对象的方法。

var clipboard = new Clipboard('.btn');
clipboard.destroy();

6) 检查是否支持clipboard.js

Clipboard.isSupported()

浏览器支持

Chrome 42+          IE 9+            Firefox 41+          Safari 10+      Opera 29+

源码demo：https://github.com/zenorocha/clipboard.js/

文章来源：https://clipboardjs.com/