HTML5. js复制到剪贴板,Clipboard.js-实现复制文本到剪贴板功能的JavaScript插件

clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中。它不依赖flash，使用非常简单。

安装

可以通过npm或bower来安装clipboard.js插件。

npm install clipboard --save

bower install clipboard --save

使用方法

或者下载压缩包，在页面中引入clipboard.js文件。

复制文本

你可以在触发元素上添加data-clipboard-target属性，该属性指向要进行复制的目标元素的ID，例如下面的代码：

剪切文本

你可以通过data-clipboard-action属性来指明你是想要“复制”，还是要“剪切”。如果没有指明该属性，默认为进行复制操作。

要剪切的内容

剪切到剪贴板

从属性中复制

你可以在目标元素上设置data-clipboard-text属性，点击触发元素后会将该属性的内容复制到剪贴板中。

复制到剪贴板

事件

在执行复制操作之后，会触发success和error回调函数。

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);

});

高级参数

如果你不想修改你的HTML代码，可以通过下面的参数来执行复制操作。

如果你想动态的设置一个target目标元素，你可以像下面这样做。

new Clipboard('.btn', {

target: function(trigger) {

return trigger.nextElementSibling;

}

});

如果你想动态的设置文本，可以：

new Clipboard('.btn', {

text: function(trigger) {

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

}

});

销毁clipboard.js插件的方法如下：

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

clipboard.destroy();

浏览器兼容

chrome42+

Firefox41+

IE9+

Opera29+