javaScript復制功能調(diào)用實現(xiàn)方案
更新時間：2012年12月13日 11:13:13 作者：
說到使用js實現(xiàn)點擊復制的功能，我下面想說的方法也是和網(wǎng)上的大同小異的。js實現(xiàn)是很簡單，最難的是兼容問題，畢竟用IE以外的人還是有很多的
復制代碼 代碼如下:
驗證碼:<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("已經(jīng)復制到剪切板");
} else {
prompt("請復制:", codeVal);
}
// window.clipboardData.setData("Text",jQuery("#code").val());
}
</script>
最近都沒有什心情去寫博文，主要因為心煩的事情漸漸多起來了。
哎！離題了，回到這篇文章了。說到使用js實現(xiàn)點擊復制的功能，我下面想說的方法也是和網(wǎng)上的大同小異的。js實現(xiàn)是很簡單，最難的是兼容問題，畢竟用IE以外的人還是有很多的。這里，我也是根據(jù)網(wǎng)上的相關資源總結(jié)一下方法。
方法一，逐一判別處理法
方法很簡單也很容易懂，就是通過判斷客戶端瀏覽器類別，來執(zhí)行不同的js代碼來實現(xiàn)復制功能。雖然從理論上來說，這樣是行得通得。但是，事實并沒有我們想得那么容易。因為我們并不太清楚一些瀏覽器下js復制代碼的寫法，至少我所知道的也就是IE和FF。
如果只是兼容IE和FF的話，那么簡單得多了。這里我使用一個網(wǎng)上比較有名的判斷IE核的方法，13字節(jié)法，這個也是我常用的。
復制代碼 代碼如下:
if("\v"=="v") {//13個字節(jié)
//這里是IE核，執(zhí)行的代碼，親測兼容IE8
}else{
//非IE核執(zhí)行代碼
}
這里我寫個大概的實現(xiàn)復制的構(gòu)架，具體代碼我不粘上來的，網(wǎng)上可以很簡單就找到，給大家參考
復制代碼 代碼如下:
function clipBoard(object){
//獲取object的值，即復制內(nèi)容
var copyTxt=document.getElementById(object).value;
//調(diào)用copy2Clipboar來實現(xiàn)瀏覽器，判斷及執(zhí)行代碼
if(copy2Clipboard(copyTxt)!= false){
alert('復制成功');
}
}
copy2Clipboard = function(txt){
if("\v"=="v"){
//IE瀏覽器執(zhí)行代碼
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;
}
}
根據(jù)需要可以自行添加不同的判斷瀏覽器代碼，實現(xiàn)該瀏覽器下的復制功能。一般情況下，根據(jù)IE > FF > opera/chrome>其他，這樣的順序進行判斷。
方法二，flash間接處理法
原理很簡單，通過創(chuàng)建一個flash，將復制的內(nèi)容以變量的方式傳遞給flash，flash再將內(nèi)容復制到內(nèi)存中，這樣就實現(xiàn)了復制的功能。只要支持flash，按理上是可以兼容絕大部分的瀏覽器的,這個方法是我今天看到的，也測試驗證了。
安裝及使用方法，可以在上面兩個網(wǎng)址上找到，E文版，中文版只有通過搜索去找咯！
這里我提供一下實現(xiàn)框架的簡單版，這里有用到上面的實現(xiàn)方式。這里有修改的，根據(jù)官方版說明方法，在單頁面很容易就能實現(xiàn)該功能，但是在實際應用到某些CMS中，可能會遇到一些問題。什么問題呢？IE核頁面會彈出 “該頁面已終止”。原因很簡單，就是js加載未完成就調(diào)用。竟然是IE的問題，那么我們就可以使用判斷IE的方法，將IE獨立出來，其他核就使用flash方法實現(xiàn)。
復制代碼 代碼如下:
function checkClient(object){//判斷瀏覽器
var copyTxt=document.getElementById(object).value; //獲取復制的內(nèi)容
if("v"!="v"){
//這里根據(jù)官方文檔設置
//這里設置flash位置，絕對相對都可以
ZeroClipboard.setMoviePath('ZeroClipboard.swf');
//創(chuàng)建一個復制對象
var clip = new ZeroClipboard.Client();
//設置手形
clip.setHandCursor(true);
//設置復制的內(nèi)容
clip.setText(copyTxt);
//設置觸發(fā)對象
>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>之間即可不管是第一種，還是第二種方法都要在需要復制的頁面上添加下面兩行代碼
設置復制內(nèi)容的文本域
復制代碼 代碼如下:
<input type="text" id="textinfo"
onmouseout="checkClient('textinfo')" value="復制的內(nèi)容" size="65"/>
設置觸發(fā)對象按鈕
復制代碼 代碼如下:
<div id="d_clip_button" onclick="copyCode('textinfo')">復制地址</div>
這是第二種方法才要添加的，設置檢測瀏覽器
復制代碼 代碼如下:
<script>checkClient('textinfo');</script>
寫到這里，大概的步驟就是這樣了，其中還有些id的名稱可以按需要修改。至少完整代碼，可以參考官方的demo。
累了。
您可能感興趣的文章:
相關文章
實例分析javascript中的call()和apply()方法
因項目需求去研究了下javascript中的call和apply方法，去百度看了幾篇介紹JS中call和apply的文章，總覺得不是很好懂，這里寫下我自己的理解，供網(wǎng)友們參考。2014-11-11
Math.pow函數(shù)想必大家都知道吧，本例介紹的是與其相反的函數(shù)2014-08-08
javascript SpiderMonkey中的函數(shù)序列化如何進行
JavaScript中如何進行函數(shù)序列化，函數(shù)序列化的作用是什么？本文將介紹SpiderMonkey中的函數(shù)序列化，有需要的朋友可以參考下2012-12-12
本文給大家分享的是在學習JavaScript中比較容易記錯又非常實用的基礎知識，希望大家能夠喜歡。2016-09-09
這篇文章主要給大家分享了微信小程序訪問node.js接口服務器的搭建教程，文中介紹的非常詳細，對大家具有一定的參考價值，需要的朋友們下面來跟著小編一起看看吧。2017-04-04
JavaScript中的call方法和apply方法使用對比
這篇文章主要介紹了JavaScript中的call方法和apply方法使用對比,需要的朋友可以參考下2015-08-08
使用Math.floor與Math.random取隨機整數(shù)的方法詳解
本篇文章對使用Math.floor與Math.random取隨機整數(shù)的方法進行了詳細的分析介紹。需要的朋友參考下2013-05-05
JavaScrip中json想必大家早已如雷貫耳，下面把自己的使用心得與大家分享下，希望對大家學習json有所幫助2013-08-08
DOM 節(jié)點屬性操作方法小結(jié)。2009-05-05
最近在工作中遇到一個需求，需要在不能顯示html格式的微信小程序中顯示html格式的內(nèi)容，通過查找相關的資料發(fā)現(xiàn)可以利用wxParse來實現(xiàn)，下面這篇文章就主要給大家介紹了微信小程序?qū)崿F(xiàn)顯示html格式內(nèi)容的方法，需要的朋友可以參考借鑒，下面來一起看看吧。2017-04-04