document.execCommand（）

此方法就是實現剪貼簿的關鍵，它可以傳入cut,copy,paste三種引數。從最常用的document.execCommand（'copy'）開始介紹。

在使用之前，我們應該檢查瀏覽器是否支援copy命令:document.queryCommandSupported('copy');或document.queryCommandEnabled('copy');，這兩個方法效果相同。

但在Chrome下，儘管Chrome確實支援使用copy命名,但兩個方法都返回false。所以最好是將檢查程式碼包在一個try-catch程式碼塊中。

下一步，我們應該允許使用者複製什麼呢？必須突出顯示文字，所有瀏覽器都可用

// 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屬性，設定繫結觸發元素以及目標元素，如：

<input id="copyme" value="text in this field will be copied" />
<button data-clipboard-target="#copyme">copy</button>

自己動手實現

clipboard.js大小僅2Kb，若僅實現如下的部分功能的話，那麼可以在20行的程式碼內實現：

1.僅部分表單元素可被複制

2.若在不支援的瀏覽器中（沒錯，就是指Safari）(譯註，Safari其實已經支援)，可突出顯示選中文字，並提示使用者按Ctrl / Cmd + C。

像clipboard.js一樣，先建立一個button用於觸發方法，它具有一個data屬性data-copytarget，指向要copy的元素(即#website)

<input type="text" id="website" value="http://www.sitepoint.com/" />
<button data-copytarget="#website">copy</button>

(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');
     }

   }
 }
})();

總結：

1.通過.select()選擇要複製的表單元素的內容

2.呼叫document.execCommand("copy")方法

3.呼叫.blur()方法，從表單元素中移除焦點

4.將第2、3步包在try catch塊中，在不支援的瀏覽器下則提示

其他方式

有很多新穎的剪貼簿應用方式。例如Trello.com,將滑鼠懸停在卡片上時，可以按Ctrl / Cmd + C 並將該卡片的連結地址複製到剪貼簿。其背後實現的方式為：先建立一個包含URL的隱藏表單元素，然後選中並複製其內容。