項目描述：最近做一個移動端活動頁面，用戶抽獎后會生成一個兌換碼，為了優化用戶體驗，需要做一個復制按鈕，能夠一鍵復制兌換碼。

項目需求: 兼容移動端所有主流瀏覽器。并且做為安卓和IOS的H5頁面。

目前能夠實現復制功能的方法有以下幾種：

1. execCommand("copy");
2. clipboardData;
3. ZeroClipboard.js

1.execCommand:是doucment對象的方法,可以實現瀏覽器菜單的很多功能，如保存文件，打開新文件，撤銷，復制，等等?？梢愿玫耐瓿晌谋揪庉?/strong>

有如下用法:

【全選】

格式：document.execCommand("SelectAll");

【打開】

格式：document.execCommand("Open");

【另存為】

格式：document.execCommand("SaveAs");

【打印】

格式：document.execCommand("print");

【剪切】

格式：document.execCommand("Cut","false",null);

【刪除】

格式：document.execCommand("Delete","false",null);

【改變文本字體】

格式：document.execCommand("FontName","false",sFontName);

【改變字體大小】

格式：document.execCommand("FontSize","false",sSize|iSize);

【使絕對定位的元素可拖動】

格式：document.execCommand("2D-Position","false","true");

【復制】

格式：document.execCommand("Copy","false",null);

等等

應用實例:

HTML：

<input onclick="copy()" value="你好.要copy的內容!">

js代碼：

function copy(){ var Url2=document.getElementById("js-copy-text"); Url2.select(); // 選擇對象 try{  if(document.execCommand('copy', false, null)){   document.execCommand("Copy");   alert("已復制好，可貼粘。");  } else{   alert("復制失敗，請手動復制");  }  } catch(err){   alert("復制失敗，請手動復制");  }}

注意：經測試該方法，PC端IE需要手動設置權限，其他瀏覽器均支持，M端很少瀏覽器支持；

2. clipboardData:對象提供了對剪貼板的訪問

clipboardData有三個方法：

1. clearData(sDataFormat)刪除剪貼板中指定格式的數據；
2. clearData(sDataFormat)getData(sDataFormat)從剪貼板中獲取制定格式的數據；
3. clearData(sDataFormat)setData(sDataFormat,sData)給剪貼板賦予指定格式的數據，返回true表示操作成功；

應用實例:

<input onclick="copy(this)" value="你好.要copy的內容!">

js代碼：

function copy(){ window.clipboardData.setData("text",document.getElementById("mytext").value); alert("The text is on the clipboard, try to paste it!");}　　

注意：經測試該方法，僅在IE瀏覽器中有效；

在其他瀏覽器運行會報錯：

firefox：TypeError: window.clipboardData is undefined

chrom: TypeError: Cannot read property 'setData' of undefined

經查資料：

MSDN https://msdn.microsoft.com/en-us/library/ms535220(v=vs.85).aspx
This object is available in script as of Microsoft Internet Explorer 5.
http://help.dottoro.com/ljctuhrg.php 也表示該方法出于對安全性的考慮,現在只支持IE:
In Firefox, Opera, Google Chrome and Safari, use the execCommand method with the 'Paste' command to retrieve and with the 'Copy' command to set the text content of the clipboard. Because of security restrictions, this method may not always work, see Example 2 for details.

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！