PJCHENder 未整理筆記

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

2017-11-13

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

@(JavaScript)[WebAPIs, javascript]

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

待閱讀:

實做方法

[Vue] Copy to clipboard @ PJCHENder Codepen

HTML

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

1
2
3
4
5
6
7
8
9
<!-- .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() 可以取消被選取的內容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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

外掛

掃描二維條碼,分享此文章