一開始，在 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 完整版手册
以上是H5 的複製操作實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
