Skip to main content

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

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

待閱讀:

實做方法#

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

參考#

作法#

WebAPIs#

外掛#

Last updated on