兼容所有浏览器的js复制代码

之前有做过js复制网页上的文本。不过因为各浏览器不兼容原因。很多失败。

之前有做过:http://shanmao.me/web/js/dian-ji-fu-zhi-dang-qian-url-huo-hu-zhi-chi-gu-ge-lan-qi-zan-bu-zhi-chi

现在用flash + js 兼容所有浏览器的复制。这让我们非常方便使用:

下载地址:

ZeroClipboard

 

Zero Clipboard的实现原理

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

 

Zero Clipboard的安装方法

首先需要下载 Zero Clipboard的压缩包,解压后把文件夹中两个文件:ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中。

然后把在你要使用复制功能的页面中引入Zero Clipboard的js文件:ZeroClipboard.js

如下代码:

[code lang=”js”]
//选中代码
$(‘.txt_code’).click(function(){
$(this).select();
});

//设置swf路径
ZeroClipboard.setMoviePath("ZeroClipboard.swf");
//创建对象
var clip = new ZeroClipboard.Client();
//设置手型
clip.setHandCursor(true);
//绑定按钮
clip.glue(‘btn_copy’);
//复制内容
clip.addEventListener( "mouseOver", function(client) {
client.setText($(‘.txt_code’).val());
});
//复制成功后的提示
clip.addEventListener( "complete", function(){
alert("copyed successful");
});

[/code]

注意:以上 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”); // 和上一句位置不可调换

这样,这样基本功能实现了,点击按钮就可以复制设置好的文本了。

 

 

具体请下载文件里面有demo.

“兼容所有浏览器的js复制代码”的2个回复

评论已关闭。