H5如何實現復制操作

小編給大家分享一下H5如何實現復制操作，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一開始，在 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 已經寫清楚了，如果有什么不懂的地方可以 @我。

以上是“H5如何實現復制操作”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！