2019/09/23

Clipboard.js

Clipboard.js印象中應該是2015出來的套件
那時候記得用法簡單,但沒什麼再用XD
剛好公司用到就順帶寫下他的用法
Clipboard.js建構子後就複製內容了
有提供success和error的event可以用


<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
  <div id="content">
    Hello, World
  </div>
  <!-- 按鈕 -->
  <button class="copyBtn" data-clipboard-target="#content">Copy Content</button>
  <!-- 超連結 -->
  <a id="copyLink" href="javascript:void(0);" data-clipboard-target="#content">Copy Content</a>
  <a id="copyLink2" href="#" data-clipboard-target="#content">Copy Content</a>
<script type="text/javascript">
  //建構子後就已經複製了
  const clipboard = new ClipboardJS('.copyBtn');
  const clipboard2 = new ClipboardJS('#copyLink');
  const clipboard3 = new ClipboardJS('#copyLink2');

  //複製成功event
  clipboard.on('success', e=>{
    alert(e.text);
  });

  clipboard2.on('success', e=>{
    alert(e.text);
  });

  clipboard3.on('success', e=>{
    alert(e.text);
  });
</script>


執行結果:



參考資料:
https://clipboardjs.com/