H5 的復制操作

dxru2659 8年前發布 | 14K 次閱讀 HTML5 前端技術 JavaScript

一開始，在 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.setAttribute("value", document.getElementById(elementId).innerHTML);

  // 添加到 DOM 元素中
  document.body.appendChild(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 就這么一些:

這里，我貼一下關鍵代碼:

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

這里需要額外提醒一下，不能自動執行上述 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.addEventListener('copy', function(e){
    // 設置信息，實現復制
    e.clipboardData.setData('text/plain', 'Hello, world!');
    e.preventDefault(); 
});

clipboardData: 該 obj 還掛載兩個常用的 API
- setData(format, data): 設置相關的數據信息，主要用于 copy 和 cut 的相關事件中。
  - format: 就是基本的 MIME type。最常用的就是 text/plain 。
  - data: 就是對應 MIME type 放入的具體數據內容
- 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 已經寫清楚了，如果有什么不懂的地方可以 @我。

來自：https://www.villainhr.com/page/2016/11/27/H5 的復制操作

本文由用戶 dxru2659 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1480304402788.html

HTML5 前端技術 JavaScript