快捷導(dǎo)航

復(fù)制Input內(nèi)容的js代碼_支持所有瀏覽器，修正了Firefox3.5以上的問(wèn)題

更新時(shí)間：2010年06月21日 13:36:25 作者：

今天作一個(gè)功能，有一個(gè)input，里邊有內(nèi)容，點(diǎn)一下按鈕就復(fù)制里邊的內(nèi)容到剪貼板

但I(xiàn)E6兩行JS代碼就可以，IE7以上也差不多，只不過(guò)出來(lái)一個(gè)安全提示比較惡心，用戶如果看到了，一定有懷疑；
再但就是Firefox、Chrome等根本就不讓你復(fù)制；
記得以前網(wǎng)上有這方面的代碼，找了一下，發(fā)現(xiàn)全部不能在firefox3.5以上的版本中應(yīng)該，最后終于找到了一個(gè)，代碼還相當(dāng)相當(dāng)?shù)膹?fù)雜，不太敢用。
最后，憋的實(shí)在沒(méi)有辦法了，查了查資料，自已寫了一個(gè)：
主要的理解的幾個(gè)點(diǎn)：
1、Firefox這些瀏覽器，出于安全考慮吧，直接是不讓復(fù)制的；
2、在Flash中，可以用System.setClipboard()，把內(nèi)容扔到剪貼板上，然后再讓FLASH工作在Firefox下；
3、在Flash播放器10.0之后呢，也是出于安全考慮吧，System.setClipboard的內(nèi)容必須在FLASH里邊；
4、用ExternalInterface可以和JS通信；
5、ExternalInterface在flash8中必須引用一下才可以；
默認(rèn)的HTML代碼：

復(fù)制代碼代碼如下:

 
<input type="text" id="testInput" name="testInput" value="4234324234" /> 
<div id="buttonBox"> 
<button onclick="copy('testInput')">copy</button> 
</div> 

所以，設(shè)計(jì)的時(shí)候，先作第一個(gè)判斷，如果是IE，就還用默認(rèn)的代碼，這樣最沒(méi)有問(wèn)題，如果不是，就用一個(gè)FLASH把默認(rèn)的按鈕覆蓋；

復(fù)制代碼代碼如下:

 
if (window.XMLHttpRequest){//如果不是IE時(shí)，就用FLASH的方式復(fù)制 
$('buttonBox').innerHTML = '<embed src="flashCopy.swf" width="48" 
height="23" quality="high" 
pluginspage="http://www.macromedia.com/go/getflashplayer" 
type="application/x-shockwave-flash"></embed>'; 
} 

以下是所有的JS文件：

復(fù)制代碼代碼如下:

 
<script> 
function $(id){ 
return document.getElementById(id); 
} 
function copy(){//ie6 
var value = $('testInput').value; 
window.clipboardData.clearData(); 
window.clipboardData.setData("Text", value); 
alert('復(fù)制成功！'); 
} 
function flashCopy(){//firefox ....... 
return $('testInput').value; 
} 
function flashCopyBack(){ 
alert('復(fù)制成功！'); 
} 
if("v" != "v"){//如果不是IE時(shí)，就用FLASH的方式復(fù)制 
$('buttonBox').innerHTML = '<embed src="111.swf" width="48" height="23" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>'; 
} 
</script> 

FLASH按鈕的代碼如下：

復(fù)制代碼代碼如下:

 
on (release) { 
import flash.external.ExternalInterface; 
var inputText = ExternalInterface.call('flashCopy'); 
System.setClipboard(inputText); 
ExternalInterface.call('flashCopyBack'); 
//_root.boboText.text = inputText; 
} 

原理，就是避開(kāi)那個(gè)安全上的限制，在點(diǎn)FLASH中的按鈕時(shí)，通過(guò)FLASH中的代碼去調(diào)頁(yè)面中的JS代碼，JS代碼可以拿到INPUT中的值，然后再傳給FLASH，這時(shí)，F(xiàn)LASH中就有了這些值了，然后，F(xiàn)LASH自已再通過(guò)System.setClipboard把這些值存到剪貼板上；再然后，他再去調(diào)用頁(yè)面中的flashCopyBack，flashCopyBack只干一件事，就是提示已復(fù)制成功！
我在Firefox、chrome、ie中都測(cè)過(guò)了，沒(méi)有問(wèn)題，如果誰(shuí)發(fā)現(xiàn)有問(wèn)題，請(qǐng)告訴我，謝謝，因?yàn)槲椰F(xiàn)在已經(jīng)開(kāi)始用！
轉(zhuǎn)載請(qǐng)注明出處：子鼠