[前端] 剪貼簿操作: clipboard.js

clipboard.js
https://github.com/zenorocha/clipboard.js/

clipboard.js web
https://clipboardjs.com/

點選複製 Clipboard.js
https://www.oxxostudio.tw/articles/201510/clipboard-js.html

clipboard.js：最輕便的複製頁面內容到剪切板的JS
https://blog.wpjam.com/m/clipboard-js/

Clipboard.js 使用說明
https://blog.csdn.net/wuyou1336/article/details/78867903

clipboard.js代碼分析(1)-select
https://segmentfault.com/a/1190000012145686

clipboard.js代碼分析(2)-emitter
https://segmentfault.com/a/1190000013510760

clipboard.js代碼分析(3)- good-listener
https://segmentfault.com/a/1190000013547261

各流覽器對 document.execCommand() 的支持程度
http://hansifer.com/clipboardCopyTest.html

這個 29.7 K 的剪貼板 JS 庫有點東西！

https://mp.weixin.qq.com/s/Q8Aqz-eARuIpgf3LkpNjfQ

以下為vue版

vue-clipboard2
https://github.com/Inndy/vue-clipboard2

clipboard.js是一款輕量級的實現複製文本到剪貼板功能的JavaScript外掛程式。通過該外掛程式可以將輸入框，文本域，DIV元素中的文本等文本內容複製到剪貼板中 clipboard.js支持主流的流覽器：chrome 42+, Firefox 41+, IE 9+, opera 29+, Safari 10+，且 clipboard.js 只有3kb大小，無需 Flash。

clipboard.js主要原理採用點擊按鈕，創建一個隱藏的textarea，把內容填進去，執行select方法把內容全選，再使用document.execCommand('copy')方法把資料複製至剪貼簿。

注意觸發儲存至剪貼簿的功能需要由使用者點擊(click)觸發，要使用純Javascript呼叫，可先掛載元素或使用body去當container，可參考clipboard.js原始碼或vue-clipboard2的實做方式。此外，iOS的瀏覽器或舊版本瀏覽器會無法使用，需使用isSupported來判斷是否提供複製功能。


#JavaScript, clipboard.js, vue-clipboard2, textarea, execCommand, copy