[Javascript][轉] 只用 JavaScript 實作一鍵複製

很久以前要做到在網頁上提供貼心的「一鍵複製」小功能，會需要用到 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();
	});
	}
	});
	})();