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

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

目前能夠?qū)崿F(xiàn)復(fù)制功能的方法有以下幾種：

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

1.execCommand:是doucment對象的方法,可以實現(xiàn)瀏覽器菜單的很多功能，如保存文件，打開新文件，撤銷，復(fù)制，等等。可以更好的完成文本編輯

有如下用法:

【全選】

格式：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");

【復(fù)制】

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

等等

應(yīng)用實例:

HTML：

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

js代碼：

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

注意：經(jīng)測試該方法，PC端IE需要手動設(shè)置權(quán)限，其他瀏覽器均支持，M端很少瀏覽器支持；

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

clipboardData有三個方法：

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

應(yīng)用實例:

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

js代碼：

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

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

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

firefox：TypeError: window.clipboardData is undefined

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

經(jīng)查資料：

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 也表示該方法出于對安全性的考慮,現(xiàn)在只支持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.

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

最新評論