php clipboard.js,纯JavaScript实现的复制剪切库–clipboard.js

clipboard.js 使用纯 JavaScript (无需 Flash)实现了复制浏览器内容到系统剪切板的功能，可以在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+。复制文本到剪切板并不是件困难的事情，它不需要复杂的配置步骤或者多说KBs的加载，但大多数情况下，都需要依赖Flash或者其他臃肿的框架，这就是clipboard.js存在的意义。

安装

使用 npm 或者 bower 安装：

//You can get it on npm.

npm install clipboard --save

//Or bower, too.

bower install clipboard --save

如果你没有上述包管理工具的话，可以直接下载 .zip 文件。

设置

首先加载 js 文件：

//或使用CDN

现在你需要使用 DOM 选择器来实例化它，该选择器对应于选择元素，如：

new Clipboard('.btn');

我们需要获取每一个匹配的元素，并为每个元素添加事件监听器，但是如果匹配元素很多的话，会消耗大量的内容。为此，我们使用事件代表团，它用一个单独的侦听器替换多个事件侦听器。

使用

复制元素

常见的用法是从另一个元素中复制内容，你可以通过给目标元素添加一个 data-clipboard-target 属性来指定剪贴板目标元素。

剪切元素

另外，你还可以通过 data-clipboard-action 属性来定义是“复制 copy ”还是“剪切 cut ”内容。如果忽略该属性，则默认值为 copy 。

Mussum ipsum cacilds...

Cut to clipboard

cut 动作只能用于 或者 元素。

从属性中复制

事实上，你甚至不需要任何其他元素就能实现复制功能。你只需在目标元素中包含一个 data-clipboard-text 属性即可。

Copy to clipboard

事件

var clipboard = new Clipboard('.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);

});

高级用法

new Clipboard('.btn', {

target: function(trigger) {

return trigger.nextElementSibling;

}

});

new Clipboard('.btn', {

text: function(trigger) {

return trigger.getAttribute('aria-label');

}

});

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

clipboard.destroy();

浏览器支持

演示

具体效果可以查看本站代码位置。