使用剪貼簿是一項基本技能。作為碼農都應知道，Tab,Ctrl/Cmd + A，Ctrl / Cmd + C以及Ctrl / Cmd + V分別是自動聚焦、複製、貼上的快捷鍵。
而對普通使用者可能就不太容易了。即使使用者知道剪貼簿是什麼，（除了）那些眼神極好或反應很快的人，其他情況下很難以突出顯示他們想要的確切文字。若使用者不知道鍵盤快捷鍵，也看不到隱藏的編輯選單，或從未使用右鍵選單或不知道長按觸屏彈出選項選單，那麼他很可能無法察覺到複製功能。
那麼我們是否應該提供一個“複製到剪貼簿”按鈕來幫助使用者？這功能應該會很有用，即使是對快捷鍵的人非常熟悉的使用者來說。
關於剪貼簿的安全
幾年前，瀏覽器不可能直接使用剪貼簿。開發人員不得不通過Flash來實現。
剪貼簿看起來無關緊要，但想象一下，如果瀏覽器能夠隨意檢視和操作內容，會發生什麼。JS指令碼（包括第三方指令碼）能檢視剪貼簿內的文字資訊，並將密碼，敏感資訊甚至整個文件傳送到遠端伺服器。
現在的剪貼簿基本功能有限，有如下限制：
- 大多數瀏覽器支援剪貼簿，除了Safari。(譯註，Safari其實已經支援)
- 支援因瀏覽器而異，有些功能不完整或有問題。
- 事件必須由使用者必須發起，如點選滑鼠或按下鍵盤。指令碼不能自由訪問剪貼簿。
document.execCommand（）
此方法就是實現剪貼簿的關鍵，它可以傳入cut,copy,paste三種引數。從最常用的document.execCommand（'copy'）開始介紹。
在使用之前，我們應該檢查瀏覽器是否支援copy命令:document.queryCommandSupported('copy');或document.queryCommandEnabled('copy');，這兩個方法效果相同。
但在Chrome下，儘管Chrome確實支援使用copy命名,但兩個方法都返回false。所以最好是將檢查程式碼包在一個try-catch程式碼塊中。
下一步，我們應該允許使用者複製什麼呢？必須突出顯示文字，所有瀏覽器都可用select()方法選擇文字input和textarea內的文字。同時Firefox和Chrome / Opera也支援document.createRange方法，該方法允許從任何元素中選擇文字，如下：
|
1 2 3 4 5 6 7 |
// select text in #myelement node var myelement = document.getElementById('#myelement'), range = document.createRange(); range.selectNode(myelement); window.getSelection().addRange(range); |
但IE / Edge不支援。
clipboard.js
若你不想自己實現一個較為健壯的跨瀏覽器剪貼簿方法的話，clipboard.js可以幫你。它有好幾種設定選項的方式，如H5的data屬性，設定繫結觸發元素以及目標元素，如：
|
1 2 |
<input id="copyme" value="text in this field will be copied" /> <button data-clipboard-target="#copyme">copy</button> |
自己動手實現
clipboard.js大小僅2Kb，若僅實現如下的部分功能的話，那麼可以在20行的程式碼內實現：
- 僅部分表單元素可被複制
- 若在不支援的瀏覽器中（沒錯，就是指Safari）(譯註，Safari其實已經支援)，可突出顯示選中文字，並提示使用者按
Ctrl / Cmd + C。
像clipboard.js一樣，先建立一個button用於觸發方法，它具有一個data屬性data-copytarget，指向要copy的元素(即#website)
|
1 2 |
<input type="text" id="website" value="http://www.sitepoint.com/" /> <button data-copytarget="#website">copy</button> |
一個立即執行函式表示式繫結click事件的函式，該函式用於解析data-copytarget屬性內容，選擇對應欄位的文字並執行document.execCommand('copy'),。若失敗，文字保持選中狀態，顯示提示框：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
(function() { 'use strict'; // click events document.body.addEventListener('click', copy, true); // event handler function copy(e) { // find target element var t = e.target, c = t.dataset.copytarget, inp = (c ? document.querySelector(c) : null); // is element selectable? if (inp && inp.select) { // select text inp.select(); try { // copy text document.execCommand('copy'); inp.blur(); } catch (err) { alert('please press Ctrl/Cmd+C to copy'); } } } })(); |
雖然在上例中，算上樣式和動畫的程式碼，程式碼已經超過20行了，但動畫和樣式是可選的。
總結：
- 通過
.select()選擇要複製的表單元素的內容 - 呼叫
document.execCommand("copy")方法 - 呼叫
.blur()方法，從表單元素中移除焦點 - 將第2、3步包在
try catch塊中，在不支援的瀏覽器下則提示
其他方式
有很多新穎的剪貼簿應用方式。例如Trello.com,將滑鼠懸停在卡片上時，可以按Ctrl / Cmd + C 並將該卡片的連結地址複製到剪貼簿。其背後實現的方式為：先建立一個包含URL的隱藏表單元素，然後選中並複製其內容。非常巧妙且實用 —— 我懷疑很少有使用者知道這個功能！
PS: 若有任何建議或問題請聯絡我~