zeroclipboard是一個跨瀏覽器的庫類 它利用 Flash 進行復制,所以只要瀏覽器裝有 Flash 就可以運行,而且比 IE 的 document.execCommand("Copy") 更加靈活。
zeroclipboard下載地址://www.49028c.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' class="copyBtn">復制</a>
<input type="text" value="text" id="copy_txt1"/><a href="javascirpt:;" id="copy_btn1" data='1' class="copyBtn">復制</a>
<input type="text" value="text" id="copy_txt2"/><a href="javascirpt:;" id="copy_btn2" data='2' class="copyBtn">復制</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() );