html代码实例可复制,使用clipboard.js实现复制功能的示例代码

最近在工作中有一个需求，就是需要使用一个按钮实现相应内容的复制。在网上找了很多解决方案，最后对比之下选择了clipboard.js插件来进行实现。因为它不依靠flash以及其他框架，而且体积小使用简单兼容性也好。下面简单介绍一下它的用法。

引入插件，可以下载，也可以使用第三方cdn。

对于HTML来说，我们有两种用法。

第一种

//html部分

复制

//js部分

var clipboard = new Clipboard('button');

clipboard.on('success',function(e){

e.clearSelection();

alert('复制成功');

});

clipboard.on('error',function(e){

e.clearSelection();

alert('复制失败');

});

说明：如果我们使用按钮复制的是另一个元素的内容，则我们可以使用这种方法。此时将按钮称为触发元素，被复制的元素称为目标元素。此时data-clipboard-target的值为目标元素的选择器，而data-clipboard-target的属性被设置在触发元素上。new Clipboard()为实例化对象，参数可以是HTML元素，元素选择器。有success和error两个事件可以供我们监听，实现自己的逻辑。因为复制完成后，目标元素会处于选中状态，所以我们需要e.clearSelection()取消目标元素的选中状态。

优点：复制的内容可以是动态的，目标元素的值发生变化，复制的值也发生变化。

适用场景：复制内容可变，不固定。

第二种

//html部分

复制

//js部分

new Clipboard('button');

说明：data-clipboard-text的值为你要复制的内容。无目标元素，只有触发元素。

缺点：复制的内容是静态的，不变的，提前设置好的。

适用场景：复制内容固定不变

对于以上缺点，我们可以优化如下，使之复制的内容也是动态的。

//html部分

复制

//js

$('#copy').on('click', function () {

var value = $('#copyValue').val();

$('#copy').attr('data-clipboard-text', value);

var clipboard = new Clipboard('#copy');

clipboard.on('success', function (e) {

alert('复制成功');

});

clipboard.on('error', function (e) {

alert('复制失败');

});

})

接着这里晒出最常用的几种方式，以供不时之需。

function-target

function-target

Copy

hello

var clipboard = new ClipboardJS('.btn', {

target: function() {

return document.querySelector('div');

}

});

clipboard.on('success', function(e) {

//console.log(e);

alert('复制成功！')

});

clipboard.on('error', function(e) {

console.log(e);

});

function-text

function-text

Copy

var clipboard = new ClipboardJS('.btn', {

text: function() {

return 'to be or not to be';

}

});

clipboard.on('success', function(e) {

console.log(e);

});

clipboard.on('error', function(e) {

console.log(e);

});

target-div

target-div

hello 123

Copy

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

clipboard.on('success', function(e) {

console.log(e);

});

clipboard.on('error', function(e) {

console.log(e);

});

target-input

target-input

Copy

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

clipboard.on('success', function(e) {

console.log(e);

});

clipboard.on('error', function(e) {

console.log(e);

});

target-textarea

target-textarea

hello

Cut

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

clipboard.on('success', function(e) {

console.log(e);

});

clipboard.on('error', function(e) {

console.log(e);

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。