使用clipboard.js怎么实现一个复制功能

今天就跟大家聊聊有关使用clipboard.js怎么实现一个复制功能，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都做网站、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的眉县网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

第一种

//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

  
  
  


  
  Copy
  
hello

  
  

  
  

function-text

  
  
  


  
  Copy

  
  

  
  

target-div

  
  
  


  
  hello 123
  Copy

  
  

  
  

target-input

  
  
  


  
  
  Copy

  
  

  
  

target-textarea

  
  
  


  
  hello
  Cut

  
  

  
  

看完上述内容，你们对使用clipboard.js怎么实现一个复制功能有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。