这是ZeroClipboard.js压缩包下载,调试了好久,原来使用ZeroClipboard.js 必须放到web容器中才能调试,本地直接打开html是不行了!
ZeroClipboard.js压缩包 用js与flash实现的复制到剪切板的文件,这款兼容性比较好,作者也是持续的更新。
ZeroClipboard.js压缩包是在开发中经常会用到复制的功能,在 IE 下通过JavaScript 内置的window.clipboardData.setData 可以简单实现复制到剪贴板功能,但是无法兼容其他浏览器,所以今天介绍一种终极解决方法:使用jhuckaby写的Zero Clipboard的js类库。此方法利用 Flash完成进行复制内容到剪贴板,所以只要浏览器装有Flash 就可以复制内容。
首先需要下载 Zero Clipboard的压缩包,解压后把文件夹中两个文件:ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中。
然后把在你要使用复制功能的页面中引入Zero Clipboard的js文件:ZeroClipboard.js
如下代码:
<script type="text/javascript" src="ZeroClipboard.js"></script>
注意:以上 ZeroClipboard.js, ZeroClipboard.swf需要放在同一路径下。如果不在同一路径,可使用ZeroClipboard.setMoviePath( “Flash路径” );来设置ZeroClipboard.swf 地址
Zero Clipboard实现简单跨浏览器复制
var clip = new ZeroClipboard.Client(); // 新建一个对象
clip.setHandCursor( true ); // 设置鼠标为手型
clip.setText("哈哈"); // 设置要复制的文本。
// 注册一个 button,参数为 id。点击这个 button 就会复制。
//这个 button 不一定要求是一个 input 按钮,也可以是其他 DOM 元素。
clip.glue("copy-botton"); // 和上一句位置不可调换
这样,这样基本功能实现了,点击按钮就可以复制设置好的文本了。你可能注意到了,待复制的文本是固定的,如果想要动态改变的怎么办,比如复制一个输入框中的内容。不用担心,下面会讲到的。