ZeroClipboard支持IE,firefox,Chrome复制到剪贴板

在做一个项目的时候碰到要讲一些内容以点击按钮的形式复制到剪贴板上。网上找了一些，有只支持IE的，有支持IE加FIREFOX的，后来发现了一个还能支持Chrome的。那就是使用ZeroClipboard，在这里分享下。

ZeroClipboard是一个js类库。此方法利用 Flash完成进行复制内容到剪贴板，所以只要浏览器装有Flash 就可以复制内容。

Zero Clipboard的实现原理

Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板 。

 

Zero Clipboard的安装方法

其实也不算安装啦，就是使用前的准备工作。
首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中。

 

Zero Clipboard : [项目主页 ] [zip下载 ] [在线演示 ]

 

Zero Clipboard实现简单跨浏览器 复制

var clip = new ZeroClipboard.Client(); // 新建一个对象 clip.setHandCursor( true ); // 设置鼠标为手型 clip.setText("哈哈"); // 设置要复制的文本。 // 注册一个 button，参数为 id。点击这个 button 就会复制。 //这个 button 不一定要求是一个 input 按钮，也可以是其他 DOM 元素。 clip.glue("copy-botton"); // 和上一句位置不可调换

 

 

好了，我就用到这里就实现了兼容浏览器的按钮复制功能了。下面是我的代码示例

 

 

<mce:script type="text/javascript" src="ZeroClipboard.js" mce_src="ZeroClipboard.js"></mce:script> <mce:script type="text/javascript"><!-- var clip = null; function init() { clip = new ZeroClipboard.Client(); clip.setHandCursor( true ); clip.setText("要复制的内容"); clip.glue( 'copy-button' );//点击复制的按钮ID,也可以是其他标签ID } window.onload = init; // --></mce:script> <input id="copy-button" value="复制" type="button">

 

至于更多的功能，大家可以自己看他的功能文档和示例。需要注意的一点就是需要把FLASH文件放在你使用该类的文件同目录下，或者就是使用ZeroClipboard.setMoviePath( “Flash路径” );来设置ZeroClipboard.swf 地址。