close

轉自 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();
});
}
});
})();
view rawcopyToClipBoard.js hosted with ❤ by GitHub

不要重複造輪子

有同樣需求的人很多，因此也有人完成了一樣的功能，而且做得更完善，clipboard.js 這套也不引用任何框架，且使用 ES6 語法寫成的工具，十分方便好用，有需要的可以試試看。

不要重複造輪子，的確節省了很多開發時間，而且在暇時之餘，更可以研究高手們的程式碼是如何寫的精粹。唯一的缺點就是，畢竟東西不是自己寫的，必須要花一點時間閱讀文件，然後測試看看，是否手邊適合專案。

參考資料：

--

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 dizzy03 的頭像
    dizzy03

    碎碎念

    dizzy03 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄