一開(kāi)始，在 Web 端，并沒(méi)有任何可以接觸到 clipborad 的內(nèi)容。以前，我們想要執(zhí)行 copy/paste/cut 只能借助 flash。但現(xiàn)在，偉大的 H5 又或者說(shuō) W3C 推出了關(guān)于 H5 操控 clipboard 的草案。最出名的就是兩個(gè) API:

document.execCommand()  ClipboardEvent

我們一步一步來(lái)了解一下。先來(lái)看一下經(jīng)典 execCommand 的使用。

復(fù)制操作

input 復(fù)制

我們需要先了解一下，基本的復(fù)制過(guò)程：

選中（select）

復(fù)制（command + c || ctrl + c）

execCommand 也是遵循這一過(guò)程來(lái)實(shí)現(xiàn)這樣的效果。如果我們想使用 execCommand 執(zhí)行 copy 的話(huà)，那么應(yīng)該先選中你想復(fù)制的元素。
這里,另外還會(huì)使用到一個(gè)新的 API, window.getSelection()。具體來(lái)說(shuō)就是：

getSelection(): 用來(lái)獲得當(dāng)前選中的元素的內(nèi)容。一般而言就是用鼠標(biāo)選中頁(yè)面上的內(nèi)容。

toString(): 用來(lái)將選中的內(nèi)容直接變?yōu)?text 文本。

基本使用就是:

// 輸出選中的文本

window.getSelection().toString();

我們一般只是使用該 API 進(jìn)行輔助作用。最常見(jiàn)的做法就是動(dòng)態(tài)創(chuàng)建 input 元素，然后動(dòng)態(tài)制定 input[value]。執(zhí)行 select(), 進(jìn)行選中，然后執(zhí)行 copy 即可。

# 總的代碼就是

function copyContent(elementId) {    // 動(dòng)態(tài)創(chuàng)建 input 元素    var aux = document.createElement("input");    // 獲得需要復(fù)制的內(nèi)容    aux.  set  Attribute("value", document.getElementById(elementId).innerHTML);    // 添加到 DOM 元素中    document.body.app  end  Child(aux);    // 執(zhí)行選中    // 注意: 只有 input 和 textarea 可以執(zhí)行 select() 方法.    aux.select();        // 獲得選中的內(nèi)容      var content = window.getSelection().toString();          // 執(zhí)行復(fù)制命令    document.execCommand("copy");    // 將 input 元素移除    document.body.removeChild(aux);  }

看個(gè)實(shí)例

任意復(fù)制

當(dāng)然，如果你想不動(dòng)態(tài)添加 input 元素，想直接 copy 的指定 DOM 元素的話(huà)，應(yīng)該怎么做呢？這里就需要使用到 HTML5 新提供的 createRange() 相關(guān)方法。當(dāng)然，上面的 getSelection() 也是其中之一。用到的 API 有:

document.createRange(): 用來(lái)創(chuàng)建選中容器。返回一個(gè) range Object。 該 API 的兼容性，也是挺好的，手機(jī)端和 PC 端都支持。

selectNode(DOM): 返回 range Object 上掛載的方法。用來(lái)添加選中元素。只能添加一個(gè)

window.getSelection()

addRange(range): 這個(gè)方法是掛載到 getSelection() 方法下的，用來(lái)執(zhí)行元素的選中。（！很重要）

上面 API 就這么一些:

直接看 demo 吧

這里，我貼一下關(guān)鍵代碼:

  var copyDOM = document.querySelector('#selector');      var range = document.createRange();      // 選中需要復(fù)制的節(jié)點(diǎn)    range.selectNode(copyDOM);    // 執(zhí)行選中元素    window.getSelection().addRange(range);    // 執(zhí)行 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();

這里需要額外提醒一下，不能自動(dòng)執(zhí)行上述 copy 操作。即，在沒(méi)有任何用戶(hù)交互操作下，是不能執(zhí)行 copy 等交互行為的。所以，這里需要用到 click 事件來(lái)輔助（當(dāng)然，你也可以使用其他事件來(lái)進(jìn)行代替）。

使用 clipboard 復(fù)制

首先, clipboard 是最近提出來(lái)的，所以它的兼容性還是需要等待時(shí)間去驗(yàn)證的，目前的兼容性是支持一些簡(jiǎn)單的 event。
如果，你的瀏覽器支持 ClipboardEvent Constructor 的話(huà)。那么 復(fù)制操作就變得異常簡(jiǎn)單。

// 當(dāng)然，下面的代碼應(yīng)該放在某個(gè)交互的 click 事件中。

var copyEvent =   new   ClipboardEvent('copy', {              dataType: 'text/plain',              data: 'My string'          });          document.dispatchEvent(copyEvent);

如果沒(méi)有的話(huà)，就只能使用在 document 的 copy 事件中返回的 event.clipboardData API 來(lái)設(shè)置或者獲取相關(guān)的信息。我們獲得 clipboardData 對(duì)象只能通過(guò)事件回調(diào)來(lái)實(shí)現(xiàn):

e.clipboardData: 只能通過(guò) document 上的copy/paste/cut 事件來(lái)獲取

document.addEvent  List  ener('copy', function(e){      // 設(shè)置信息，實(shí)現(xiàn)復(fù)制      e.clipboardData.setData('text/plain', 'Hello, world!');      e.  prev  entDefault();   });

clipboardData: 該 obj 還掛載兩個(gè)常用的 API

format: 就是基本的 MIME type。最常用的就是 text/plain。具體內(nèi)容可以參考 MIME references

data: 就是對(duì)應(yīng) MIME type 放入的具體數(shù)據(jù)內(nèi)容

setData(format, data): 設(shè)置相關(guān)的數(shù)據(jù)信息，主要用于 copy 和 cut 的相關(guān)事件中。

getData(format): 一般用于 paste 事件中。用來(lái)獲取 clipboard 里面的內(nèi)容。不過(guò)，需要制定正確的解碼格式（就是設(shè)置好正確的 MIME type）。并且，該方法只能在 paste 事件中使用。

上面感覺(jué)就是簡(jiǎn)單的介紹一下 API，接下來(lái)正式說(shuō)一些干貨。如果使用 clipboardData 實(shí)現(xiàn)自定義復(fù)制內(nèi)容。這樣，你不僅僅可以復(fù)制頁(yè)面上簡(jiǎn)單的 text 文本，還可以復(fù)制圖片信息等。

看代碼

// 在指定 DOM 上綁定交互事件

DOM.addEventListener('click',function(){},false){      // 添加 copy 內(nèi)容      document.addEventListener('copy',function copy (e) {              msg = `<${msg}/>`;              e.clipboardData.setData('text/plain', msg);              e.preventDefault();          })      // 執(zhí)行 copy 命令      document.execCommand('copy');      // 移除綁定事件      document.removeEventListener('copy','copy');  }

cut && paste 相關(guān)

前面看起來(lái)也挺簡(jiǎn)單的。當(dāng)然，有同學(xué)會(huì)想，不是還有其他事件比如 cut, paste 嗎？是不是也可以這么做呢？
額…
一開(kāi)始，我也是這么想的，但現(xiàn)實(shí)往往會(huì)給您一個(gè)輕輕的愛(ài)撫。因?yàn)?，為了防止你惡意的獲取用戶(hù)信息，在 Chrome 中，一般而言你是不能通過(guò) document.execCommand('paste') 觸發(fā) paste 事件。不過(guò)，在手機(jī)端中，規(guī)矩是，你可以在可編輯的元素中觸發(fā) cut 和 paste , 只能在有效的 選中 元素中，觸發(fā) copy。

根據(jù)上面的說(shuō)法，我們可以通過(guò)利用 paste 的相關(guān)方法，來(lái)具體應(yīng)用到實(shí)踐中。比如，防止用戶(hù)粘貼信息。這特別適用于那些做題頁(yè)面，防止你查資料然后 copy 相關(guān)答案。

document.addEventListener('paste',function copy (e) {            e.preventDefault();        });  當(dāng)然，還有更狠的，直接禁止 copy，paste，cut 事件。  ['cut', 'copy', 'paste'].forEach((event)=>{    document.addEventListener(event, (e)=>{        e.preventDefault();    });});

方案總結(jié)

HTML5 現(xiàn)在能完美提供給我們的應(yīng)該就是 copy 事件的使用，對(duì)于市面上的 clipboard.js 差不多也是運(yùn)用上述的知識(shí)點(diǎn)。根據(jù)上面的描述，可以了解到，想要實(shí)現(xiàn)復(fù)制功能有三種漸進(jìn)退化方案。以下兼容性由高到低：

input 模式

createRange

clipboard 直接操作

現(xiàn)在 React 比較火，這里我簡(jiǎn)單的寫(xiě)了一個(gè) copybtn 組件。具體的使用 README 已經(jīng)寫(xiě)清楚了，如果有什么不懂的地方可以 @我。

【相關(guān)推薦】

1. 免費(fèi)h5在線(xiàn)視頻教程

2. HTML5 完整版手冊(cè)

3. php.cn原創(chuàng)html5視頻教程