ClipboardJS复制粘贴插件的使用

1、简单的纯JS复制粘贴(兼容性差,只能用textarea标签)

  var btn=document.getElementsByClassName("btn")[0];  //复制按钮
  btn.onclick=function(){
    var foo = document.getElementById("foo");  //要复制的节点,只能是textarea
    foo.select();
    document.execCommand("Copy");
  }

2、ClipboardJS插件的使用

(一)简单的使用

<textarea id="foo">123</textarea>  //被复制对象
<button class="btn" data-clipboard-target="#foo" data-clipboard-action="copy">复制</button>  //复制

new ClipboardJS('.btn');

(二)高级的使用

  ClipboardJS.isSupported()  //是否兼容

  var clipboard = new ClipboardJS('.btn', {
    target: function(trigger) {
      return document.getElementById("foo")  //选择对象
    }
  });

  var clipboard = new ClipboardJS('.btn', {
    text: function(trigger) {
      return 123567;  //复制内容
    }
  })

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

  

原文地址:https://www.cnblogs.com/huangqiming/p/8668738.html