站長資訊網一開始，在 Web 端，并沒有任何可以接觸到 clipborad 的內容。以前，我們想要執行 copy/paste/cut 只能借助 flash。但現在，偉大的 H5 又或者說 W3C 推出了關于 H5 操控 clipboard 的草案。最出名的就是兩個 API:
document.execCommand() ClipboardEvent
我們一步一步來了解一下。先來看一下經典 execCommand 的使用。
復制操作
input 復制
我們需要先了解一下，基本的復制過程：
選中（select）
復制（command + c || ctrl + c）
execCommand 也是遵循這一過程來實現這樣的效果。如果我們想使用 execCommand 執行 copy 的話，那么應該先選中你想復制的元素。
這里,另外還會使用到一個新的 API, window.getSelection()。具體來說就是：
getSelection(): 用來獲得當前選中的元素的內容。一般而言就是用鼠標選中頁面上的內容。
toString(): 用來將選中的內容直接變為 text 文本。
基本使用就是:
// 輸出選中的文本
window.getSelection().toString();
我們一般只是使用該 API 進行輔助作用。最常見的做法就是動態創建 input 元素，然后動態制定 input[value]。執行 select(), 進行選中，然后執行 copy 即可。
# 總的代碼就是
function copyContent(elementId) { // 動態創建 input 元素 var aux = document.createElement("input"); // 獲得需要復制的內容 aux. set Attribute("value", document.getElementById(elementId).innerHTML); // 添加到 DOM 元素中 document.body.app end Child(aux); // 執行選中 // 注意: 只有 input 和 textarea 可以執行 select() 方法. aux.select(); // 獲得選中的內容 var content = window.getSelection().toString(); // 執行復制命令 document.execCommand("copy"); // 將 input 元素移除 document.body.removeChild(aux); }
看個實例
任意復制
當然，如果你想不動態添加 input 元素，想直接 copy 的指定 DOM 元素的話，應該怎么做呢？這里就需要使用到 HTML5 新提供的 createRange() 相關方法。當然，上面的 getSelection() 也是其中之一。用到的 API 有:
document.createRange(): 用來創建選中容器。返回一個 range Object。 該 API 的兼容性，也是挺好的，手機端和 PC 端都支持。
selectNode(DOM): 返回 range Object 上掛載的方法。用來添加選中元素。只能添加一個
window.getSelection()
addRange(range): 這個方法是掛載到 getSelection() 方法下的，用來執行元素的選中。（！很重要）
上面 API 就這么一些:
直接看 demo 吧
這里，我貼一下關鍵代碼:
var copyDOM = document.querySelector('#selector'); var range = document.createRange(); // 選中需要復制的節點 range.selectNode(copyDOM); // 執行選中元素 window.getSelection().addRange(range); // 執行 copy 操作 var successful = document.execCommand('copy'); try { var msg = successful ? 'successful' : 'unsuccessful'; console.log('copy is' + msg); } catch(err) { console.log('Oops, unable to copy'); } // 移除選中的元素 window.getSelection().remove All Ranges();
這里需要額外提醒一下，不能自動執行上述 copy 操作。即，在沒有任何用戶交互操作下，是不能執行 copy 等交互行為的。所以，這里需要用到 click 事件來輔助（當然，你也可以使用其他事件來進行代替）。
使用 clipboard 復制
首先, clipboard 是最近提出來的，所以它的兼容性還是需要等待時間去驗證的，目前的兼容性是支持一些簡單的 event。
如果，你的瀏覽器支持 ClipboardEvent Constructor 的話。那么 復制操作就變得異常簡單。
// 當然，下面的代碼應該放在某個交互的 click 事件中。
var copyEvent = new ClipboardEvent('copy', { dataType: 'text/plain', data: 'My string' }); document.dispatchEvent(copyEvent);
如果沒有的話，就只能使用在 document 的 copy 事件中返回的 event.clipboardData API 來設置或者獲取相關的信息。我們獲得 clipboardData 對象只能通過事件回調來實現:
e.clipboardData: 只能通過 document 上的copy/paste/cut 事件來獲取
document.addEvent List ener('copy', function(e){ // 設置信息，實現復制 e.clipboardData.setData('text/plain', 'Hello, world!'); e. prev entDefault(); });
clipboardData: 該 obj 還掛載兩個常用的 API
format: 就是基本的 MIME type。最常用的就是 text/plain。具體內容可以參考 MIME references
data: 就是對應 MIME type 放入的具體數據內容
setData(format, data): 設置相關的數據信息，主要用于 copy 和 cut 的相關事件中。
getData(format): 一般用于 paste 事件中。用來獲取 clipboard 里面的內容。不過，需要制定正確的解碼格式（就是設置好正確的 MIME type）。并且，該方法只能在 paste 事件中使用。
上面感覺就是簡單的介紹一下 API，接下來正式說一些干貨。如果使用 clipboardData 實現自定義復制內容。這樣，你不僅僅可以復制頁面上簡單的 text 文本，還可以復制圖片信息等。
看代碼
// 在指定 DOM 上綁定交互事件
DOM.addEventListener('click',function(){},false){ // 添加 copy 內容 document.addEventListener('copy',function copy (e) { msg = `<${msg}/>`; e.clipboardData.setData('text/plain', msg); e.preventDefault(); }) // 執行 copy 命令 document.execCommand('copy'); // 移除綁定事件 document.removeEventListener('copy','copy'); }
cut && paste 相關
前面看起來也挺簡單的。當然，有同學會想，不是還有其他事件比如 cut, paste 嗎？是不是也可以這么做呢？
額…
一開始，我也是這么想的，但現實往往會給您一個輕輕的愛撫。因為，為了防止你惡意的獲取用戶信息，在 Chrome 中，一般而言你是不能通過 document.execCommand('paste') 觸發 paste 事件。不過，在手機端中，規矩是，你可以在可編輯的元素中觸發 cut 和 paste , 只能在有效的 選中 元素中，觸發 copy。
根據上面的說法，我們可以通過利用 paste 的相關方法，來具體應用到實踐中。比如，防止用戶粘貼信息。這特別適用于那些做題頁面，防止你查資料然后 copy 相關答案。
document.addEventListener('paste',function copy (e) { e.preventDefault(); }); 當然，還有更狠的，直接禁止 copy，paste，cut 事件。 ['cut', 'copy', 'paste'].forEach((event)=>{ document.addEventListener(event, (e)=>{ e.preventDefault(); });});
方案總結
HTML5 現在能完美提供給我們的應該就是 copy 事件的使用，對于市面上的 clipboard.js 差不多也是運用上述的知識點。根據上面的描述，可以了解到，想要實現復制功能有三種漸進退化方案。以下兼容性由高到低：
input 模式
createRange
clipboard 直接操作
現在 React 比較火，這里我簡單的寫了一個 copybtn 組件。具體的使用 README 已經寫清楚了，如果有什么不懂的地方可以 @我。
【相關推薦】
1. 免費h5在線視頻教程
2. HTML5 完整版手冊
3. php.cn原創html5視頻教程
