ClipboardJS複製貼上外掛的使用

kimingw發表於2018-03-29
JS

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

　　

相關文章