zeroclipboard 單個複制按鈕和多個複制按鈕的實現方法

zeroclipboard是一個跨瀏覽器的庫類它利用Flash 進行複制，所以只要瀏覽器裝有Flash 就可以運行，而且比IE 的document.execCommand("Copy") 更加靈活。

zeroclipboard下載地址：//www.VeVB.COm/jiaoben/24961.html

zeroclipboard實現多瀏覽器複製到粘貼板功能（單個複制按鈕和多個複制按鈕） 為了更好的用戶體驗，現在很多網站中文本框的內容只需要點擊複製按鈕這樣就能把內容複製到粘貼板了；

出於兼容性的考慮，基本上都是通過zeroclipboard來實現.首先要下載zeroclipboard，解壓後把ZeroClipboard.js和ZeroClipboard.swf、ZeroClipboard10.swf(“為了flash10”)放到項目中，可以通過ZeroClipboard.setMoviePath( '/ZeroClipboard.swf' )方法來加載swf;

下面是整理的代碼（也是通過網上查找整理的）

（單個複制按鈕）：

html:

複製代碼代碼如下:

<input type="text" value="text" id="copy_txt"/><a href="javascirpt:;" id="copy_btn">複製</a>

<script language="JavaScript">

ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' ); //和html不在同一目錄需設置setMoviePath

ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' );

var clip = new ZeroClipboard.Client(); //創建新的Zero Clipboard對象

clip.setText( '' ); // will be set later on mouseDown //清空剪貼板

clip.setHandCursor( true ); //設置鼠標移到復制框時的形狀

clip.setCSSEffects( true ); //啟用css

clip.addEventListener( 'complete', function(client, text) { //複製完成後的監聽事件

alert("aa")

clip.hide(); // 複製一次後，hide()使復制按鈕失效，防止重複計算使用次數

} );

clip.addEventListener( 'mouseDown', function(client) {

clip.setText( document.getElementById('copy_txt').value );

} );

clip.glue( 'copy_btn' );

</script>

多個複制按鈕：

複製代碼代碼如下:

<input type="text" value="text" id="copy_txt0"/><a href="javascirpt:;" id="copy_btn0" data='0'>複製</a>

<input type="text" value="text" id="copy_txt1"/><a href="javascirpt:;" id="copy_btn1" data='1'>複製</a>

<input type="text" value="text" id="copy_txt2"/><a href="javascirpt:;" id="copy_btn2" data='2'>複製</a>

<script language="JavaScript">

$(".copyBtn").each(function(i){

var id = $(this).attr('data');

var clip=null;

clip = new ZeroClipboard.Client();

ZeroClipboard.setMoviePath( 'ZeroClipboard.swf' ); //和html不在同一目錄需設置setMoviePath

ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' );

clip.setHandCursor( true );

clip.setText( $("#copy_txt"+id).val() );

clip.addEventListener('complete', function (client, text) {

alert( "恭喜複製成功" );

});

clip.glue( 'copy_btn'+id);

});

</script>

注意： clip.setText( $("#copy_txt"+id).val() );如果是獲取div中的內容， 一般用clip.setText( $("#copy_txt"+id).text() );或clip.setText( $("#copy_txt"+id).html() );