将文本复制到剪贴板的现代化方法。没有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/
网友评论