zeroclipboard单个复制按钮和多个复制按钮的实现方法_javascript技巧

zeroclipboard下载地址：http://www.gxlcms.com/jiaoben/24961.html

zeroclipboard实现多浏览器复制到粘贴板功能（单个复制按钮和多个复制按钮） 为了更好的用户体验，现在很多网站中文本框的内容只需要点击复制按钮这样就能把内容复制到粘贴板了；

出于兼容性的考虑，基本上都是通过zeroclipboard来实现.首先要下载zeroclipboard，解压后把ZeroClipboard.js和ZeroClipboard.swf、ZeroClipboard10.swf(“为了flash10”)放到项目中，可以通过ZeroClipboard.setMoviePath( '/ZeroClipboard.swf' )方法来加载swf;
下面是整理的代码（也是通过 网上查找整理的）

（单个复制按钮）：

html:

代码如下:
复制

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' );

多个复制按钮：

代码如下:
复制
复制
复制

$(".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);
});

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