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

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM