有這樣一個(gè)需求，用戶(hù)點(diǎn)擊或其它（例如雙擊事件）操作后，需要復(fù)制一段文字，實(shí)現(xiàn)有三種方式。

1.input 復(fù)制

基本的復(fù)制過(guò)程：
選中（select）
復(fù)制（command + c || ctrl + c）
類(lèi)似于下圖

復(fù)制

最常見(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.setAttribute("value", document.getElementById(elementId).innerHTML);

  // 添加到 DOM 元素中
  document.body.appendChild(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);

}

2.任意復(fù)制

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

• document.createRange(): 用來(lái)創(chuàng)建選中容器。返回一個(gè) range Object。
• selectNode(DOM): 返回 range Object 上掛載的方法。用來(lái)添加選中元素。只能添加一個(gè)
• window.getSelection()
• addRange(range): 這個(gè)方法是掛載到 getSelection() 方法下的，用來(lái)執(zhí)行元素的選中。（！很重要）

   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().removeAllRanges();

注：該方式被復(fù)制的節(jié)點(diǎn)一定是可見(jiàn)的。

3.使用 clipboard 實(shí)現(xiàn)自定義復(fù)制內(nèi)容

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

• setData(format, data): 設(shè)置相關(guān)的數(shù)據(jù)信息，主要用于 copy 和 cut 的相關(guān)事件中。
• format: 就是基本的 MIME type。最常用的就是 text/plain。具體內(nèi)容可以參考 MIME references
• data: 就是對(duì)應(yīng) MIME type 放入的具體數(shù)據(jù)內(nèi)容
• getData(format): 一般用于 paste 事件中。用來(lái)獲取 clipboard 里面的內(nèi)容。不過(guò)，需要制定正確的解碼格式（就是設(shè)置好正確的 MIME type）。并且，該方法只能在 paste 事件中使用。

// 在指定 DOM 上綁定交互事件
DOM.addEventListener('click',function(){},false){
    // 添加 copy 內(nèi)容
    document.addEventListener('copy',function copy (e) {
            e.clipboardData.setData('text/plain', "copy text");
            e.preventDefault();
        })
    // 執(zhí)行 copy 命令
    document.execCommand('copy');
    // 移除綁定事件
    document.removeEventListener('copy','copy');
}

原文鏈接