H5 的複製操作實例程式碼-H5教程-PHP中文網

H5 的複製操作實例程式碼

零下一度

發布： 2017-05-12 12:02:24

原創

2178 人瀏覽過

一開始，在 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视频教程

以上是H5 的複製操作實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！