轉自 https://poychang.github.io/javascript-copy-clipboard/
--
很久以前要做到在網頁上提供貼心的「一鍵複製」小功能，會需要用到 flash。後來 JavaScript 有了 execCommand 之後，搭配 jQuery 來選定 HTML 元素，實作一鍵複製的功能就變得輕鬆許多。
那麼在沒有使用 jQuery 框架的情況下，要如何達成一樣的功能呢？
將功能剝絲抽繭，一項項列出來：
| 項目 | jQuery 的作法 |
|---|
| 等待 DOM 載入完畢 |
$(document).ready() |
| 綁定按鈕動作 |
$(document).on(events, selector, data, handler) |
| 找到要複製的區塊 |
jQuery Selectors |
| 選取目標 |
window.getSelection() |
| 執行複製 |
document.execCommand('copy') |
接著就會發現，只有前三項動作有用到 jQuery 的框架，而剛好這三項都有純 JavaScript 的方式來取代，所以我們把項目的作法修改一下：
| 項目 | JavaScript 的作法 |
|---|
| 等待 DOM 載入完畢 |
document.addEventListener("DOMContentLoaded") |
| 綁定按鈕動作 |
EventTarget.addEventListener() |
| 找到要複製的區塊 |
document.querySelector() 或 document.getElementById() |
| 選取目標 |
window.getSelection() |
| 執行複製 |
document.execCommand('copy') |
如此一來，我們可以就可以用最原始的 JavaScript 不引用任何框架，就達成一鍵複製。
完整程式碼
|
(function () { |
|
//This method NOT support IE8 |
|
// ------------------------------ |
|
// HTML Template: |
|
// ------------------------------ |
|
// <div class="item"> |
|
// <p class="copy-area">this it copy-area for test</p> |
|
// <input type="text" value="Copy This Text" class="copy-area"> |
|
// <button type="button" class="btn-copy">copy</button> |
|
// </div> |
|
// ------------------------------ |
|
document.addEventListener("DOMContentLoaded", function () { |
|
// 取得所有有 .item 類別的 DMO 元素 |
|
var items = document.querySelectorAll('.item'); |
|
|
|
// 將所有找到的元素一個個丟進去 copyToClipBoard 處理，添加監聽事件 |
|
for (var i = 0; i < items.length; ++i) { |
|
copyToClipBoard(items[i]); |
|
} |
|
|
|
function copyToClipBoard(item) { |
|
// 取得有 .btn-copy 類別的按鈕元素 |
|
var btnCopy = item.querySelector('.btn-copy'); |
|
// 添加監聽 click 事件 |
|
btnCopy.addEventListener('click', function (event) { |
|
// 取得有 .copy-area 類別的元素 |
|
var copyArea = item.querySelector('.copy-area'); |
|
var range = document.createRange(); |
|
range.selectNode(copyArea); |
|
// 選取裡面的文字 |
|
window.getSelection().addRange(range); |
|
try { |
|
// 執行瀏覽器的複製指令，複製上面 copyArea 內選取到的文字 |
|
var copyStatus = document.execCommand('copy'); |
|
var msg = copyStatus ? 'copied' : 'failed'; |
|
// 輸出狀態 |
|
console.log(msg); |
|
} catch (error) { |
|
console.log('Oops!, unable to copy'); |
|
} |
|
// 移除選取 |
|
window.getSelection().removeAllRanges(); |
|
}); |
|
} |
|
}); |
|
})(); |
不要重複造輪子
有同樣需求的人很多，因此也有人完成了一樣的功能，而且做得更完善，clipboard.js 這套也不引用任何框架，且使用 ES6 語法寫成的工具，十分方便好用，有需要的可以試試看。
不要重複造輪子，的確節省了很多開發時間，而且在暇時之餘，更可以研究高手們的程式碼是如何寫的精粹。唯一的缺點就是，畢竟東西不是自己寫的，必須要花一點時間閱讀文件，然後測試看看，是否手邊適合專案。
參考資料：
--
留言列表
AI 
