[WebAPIs] Copy to clipboard 複製到剪貼簿

keywords: clipboard, copy, paste, 複製, 貼上, 剪貼簿, 複製到剪貼簿

待閱讀：

• Unblocking clipboard access @ Web.dev

實做方法

[Vue] Copy to clipboard @ PJCHENder Codepen

HTML

因為要複製必須要先能夠把欲複製的內容選起來，所以一般只能使用 <input type="text"> 或 <textarea> 。因此，先在 HTML 中埋藏一段，並且把要帶的 value 代入 <input type="hidden" value="9487">：

<!-- .vue -->
<div class="form-control">
  <span class="title">Testing Code:</span>
  <span class="code text-red">{{ testingCode }}</span>
  <span class="btn-copy" @click.stop.prevent="copyTestingCode">Copy</span>

  <!--  利用 input hidden 埋要被複製的值  -->
  <input type="hidden" id="testing-code" :value="testingCode" />
</div>

JavaScript

• 要複製到剪貼簿，先把要複製內容的元素透過 querySelector 選取
• 由於 type="hidden" 的 <input> 是無法複製的，因此我們要複製前先將它設成 text， setAttribute('type', 'text')
• 透過 HTMLInputElement.select() 的方法，可以把選取被 query 到的 <input> 元素
• 執行 document.execCommand('copy') 來複製被選取的內容
• 最後把原本隱藏的 input 欄位一樣透過 setAttribute('type', 'hidden') 設定回去
• window.getSelection().removeAllRanges() 可以取消被選取的內容

function copyTestingCode() {
  let testingCodeToCopy = document.querySelector('#testing-code');
  testingCodeToCopy.setAttribute('type', 'text'); // 不是 hidden 才能複製
  testingCodeToCopy.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    alert('Testing code was copied ' + msg);
  } catch (err) {
    alert('Oops, unable to copy');
  }

  /* unselect the range */
  testingCodeToCopy.setAttribute('type', 'hidden');
  window.getSelection().removeAllRanges();
}

參考

作法

• Accessing the Clipboard in JavaScript Using the Async Clipboard API @ Alligator
• Native Browser Copy To Clipboard @ CSS-Tricks
• How do I copy to the clipboard in javascript @ StackOverflow

WebAPIs

• HTMLInputElement.select() @ MDN
• window.getSelection() @ MDN
• Selection.removeRange() @ MDN
• paste event @ MDN Web API

外掛

• clipboard.js