js如何實(shí)現(xiàn)一鍵復(fù)制功能

這篇文章主要介紹了js如何實(shí)現(xiàn)一鍵復(fù)制功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

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

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

1. execCommand("copy");

2. clipboardData;

3. ZeroClipboard.js

1.execCommand:是doucment對象的方法,可以實(shí)現(xiàn)瀏覽器菜單的很多功能，如保存文件，打開新文件，撤銷，復(fù)制，等等?？梢愿玫耐瓿晌谋揪庉?/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");

【復(fù)制】

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

等等

應(yīng)用實(shí)例:

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)用實(shí)例:

<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瀏覽器中有效；

在其他瀏覽器運(yùn)行會報錯：

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.

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“js如何實(shí)現(xiàn)一鍵復(fù)制功能”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!