javaScript複製功能調用實現方案

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

複製代碼代碼如下:驗證碼:<input type="text" id="code"/> <input type="button" value="複製" onclick="fuzhi()">
<script type="text/javascript">
function fuzhi(){
var codeVal=jQuery("#code").val();
alert(codeVal);
if (navigator.userAgent.toLowerCase().indexOf('ie') > -1) { //IE瀏覽器
clipboardData.setData('Text', codeVal);
alert("已經複製到剪下板");
} else {
prompt("請複製:", codeVal);
}
// window.clipboardData.setData("Text",jQuery("#code").val());
}
</script>

最近都沒有什心情去寫博文，主要因為心煩的事情漸漸多起來了。
哎！離題了，回到這篇文章了。說到使用js實現點擊複製的功能，我下面想說的方法也是和網上的大同小異的。js實現是很簡單，最難的是相容問題，畢竟用IE以外的人還是有很多的。這裡，我也是根據網上的相關資源總結一下方法。

方法一，逐一判別處理法
方法很簡單也很容易懂，就是通過判斷用戶端瀏覽器類別，來執行不同的js代碼來實現複製功能。雖然從理論上來說，這樣是行得通得。但是，事實並沒有我們想得那麼容易。因為我們並不太清楚一些瀏覽器下js複製代碼的寫法，至少我所知道的也就是IE和FF。

如果只是相容IE和FF的話，那麼簡單得多了。這裡我使用一個網上比較有名的判斷IE核的方法，13位元組法，這個也是我常用的。複製代碼代碼如下:if("\v"=="v") {//13個位元組
//這裡是IE核，執行的代碼，親測相容IE8
}else{
//非IE核執行代碼
}

這裡我寫個大概的實現複製的構架，具體代碼我不粘上來的，網上可以很簡單就找到，給大家參考複製代碼代碼如下:function clipBoard(object){
//擷取object的值，即複製內容
var copyTxt=document.getElementById(object).value;
//調用copy2Clipboar來實現瀏覽器，判斷及執行代碼
if(copy2Clipboard(copyTxt)!= false){
alert('複製成功');
}
}
copy2Clipboard = function(txt){
if("\v"=="v"){
//IE瀏覽器執行代碼
window.clipboardData.clearData();
window.clipboardData.setData("Text",txt);
return true;
}else if(navigator.userAgent.indexOf("Firefox")>0){
//Firefox瀏覽器
return true;
}else if(window.google && window.chrome){
//chrome瀏覽器
return true;
}else{
alert("瀏覽器不支援");
return false;
}
}

根據需要可以自行添加不同的判斷瀏覽器代碼，實現該瀏覽器下的複製功能。一般情況下，根據IE > FF > opera/chrome>其他，這樣的順序進行判斷。

方法二，flash間接處理法
原理很簡單，通過建立一個flash，將複製的內容以變數的方式傳遞給flash，flash再將內容複寫到記憶體中，這樣就實現了複製的功能。只要支援flash，按理上是可以相容絕大部分的瀏覽器的,這個方法是我今天看到的，也測實驗證了。

安裝及使用方法，可以在上面兩個網址上找到，E文版，中文版只有通過搜尋去找咯！
這裡我提供一下實現架構的簡單版，這裡有用到上面的實現方式。這裡有修改的，根據官方版說明方法，在單頁面很容易就能實現該功能，但是在實際應用到某些CMS中，可能會遇到一些問題。什麼問題呢？IE核頁面會彈出 “該頁面已終止”。原因很簡單，就是js載入未完成就調用。竟然是IE的問題，那麼我們就可以使用判斷IE的方法，將IE獨立出來，其他核就使用flash方法實現。複製代碼代碼如下:function checkClient(object){//判斷瀏覽器
var copyTxt=document.getElementById(object).value; //擷取複製的內容
if("v"!="v"){
//這雷根據官方文檔設定
//這裡設定flash位置，絕對相對都可以
ZeroClipboard.setMoviePath('ZeroClipboard.swf');
//建立一個複製對象
var clip = new ZeroClipboard.Client();
//設定手形
clip.setHandCursor(true);
//設定複製的內容
clip.setText(copyTxt);
//設定觸發對象
>clip.glue('d_clip_button');
}
}

這裡用於判斷是否為IE核，IE核將不使用flash處理法，直接使用複製機制複製代碼代碼如下://複製處理
function clipBoard(object){
var copyTxt=document.getElementById(object).value;
if(copy2Clipboard(copyTxt)!= false){
alert('複製成功');
}
}
copy2Clipboard = function(txt){
if("\v"=="v") { //判斷是否是IE瀏覽器
window.clipboardData.clearData();
window.clipboardData.setData("Text",txt);
return true;
}
else{ //非IE核直接返回
return true;
}

以上為第二種方法的最簡單設定方法，將代碼放到<head></head>之間即可不管是第一種，還是第二種方法都要在需要複製的頁面上添加下面兩行代碼
設定複製內容的文本域 複製代碼代碼如下:<input type="text" id="textinfo"
onmouseout="checkClient('textinfo')" value="複製的內容" size="65"/>

設定觸發對象按鈕複製代碼代碼如下:<div id="d_clip_button" onclick="copyCode('textinfo')">複製地址</div>

這是第二種方法才要添加的，設定檢測瀏覽器複製代碼代碼如下:<script>checkClient('textinfo');</script>

寫到這裡，大概的步驟就是這樣了，其中還有些id的名稱可以按需要修改。至少完整代碼，可以參考官方的demo。
累了。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More