先不考虑浏览器的兼容性,看看各浏览器对复制功能的支持情况:
1、ie浏览器,解决方法有三种,代码如下:
[javascript]
function copy(txtid){
var txtobj = document.getelementbyid(txtid);
if(window.clipboarddata){ // 仅ie支持此对象,firefox、chrome不支持
//1、通过clipboarddata对象实现复制
//window.clipboarddata.cleardata();
//window.clipboarddata.setdata(text,txtobj.value);
//2、通过document对象实现复制:先选择中文本,再执行复制命令
//txtobj.select();
//document.execcommand(copy); // 仅ie支持,firefox报语法错误,chrome执行结果返回false(不支持)
//3、通过textrange对象实现现复制:可以不用先选中内容
txtobj.createtextrange().execcommand(copy);
}
}
function copy(txtid){
var txtobj = document.getelementbyid(txtid);
if(window.clipboarddata){ // 仅ie支持此对象,firefox、chrome不支持
//1、通过clipboarddata对象实现复制
//window.clipboarddata.cleardata();
//window.clipboarddata.setdata(text,txtobj.value);
//2、通过document对象实现复制:先选择中文本,再执行复制命令
//txtobj.select();
//document.execcommand(copy); // 仅ie支持,firefox报语法错误,chrome执行结果返回false(不支持)
//3、通过textrange对象实现现复制:可以不用先选中内容
txtobj.createtextrange().execcommand(copy);
}
}
2、firefox,通过接口的方法实现,火狐是出于安全原因,在17之后版本关闭此接口,17及之前版本可用。代码如下:
[javascript]
var clip = components.classes['@mozilla.org/widget/clipboard;1'].createinstance(components.interface.nsiclipboard);
var clip = components.classes['@mozilla.org/widget/clipboard;1'].createinstance(components.interface.nsiclipboard);3、chrome出于安全,未向用户提供对剪贴板的操作。由此可见,各浏览器对复制功能的支持并不统一。
zero clipboard库
jhuckaby写的zero clipboard的js类库,利用flash完成复制内容到剪贴板。只要浏览器装有flash插件就可以复制内容,通过actionscript屏蔽了javascript的不足,解决浏览器间复制兼容性问题。
zero clipboard的实现原理:zero clipboard首先生成flash对象标签,让透明的flash漂浮在复制按钮之上,其实点击的不是按钮而是flash,这样将需要的内容传入flash,再通过flash的复制到系统剪贴板。
zero clipboard的使用方法
注意:由于是基于flash实现,flash出于安全,需要在web容器(例如apache、tomcat)中才能运行,直接打开flash将不会被加载,按钮类似假死现象,网上说右键flash设置将zeroclipboard.swf添加到受信任位置,感觉应该是行的,我试了,仍然不行,也可能是我本地浏览器的问题。
1>下载zero clipboard的压缩包,解压后把文件夹中两个文件:zeroclipboard.js和zeroclipboard.swf放入到你的项目中;
2>引入zero clipboard.js文件,如下代码:<script type="text/javascript" src="zeroclipboard.js"></script>;
注意:zeroclipboard.js与zeroclipboard.swf需要放在同一路径下,如果不在同一路径,可使用zeroclipboard.setmoviepath()来设置。
3>简单复制代码如下:
[javascript]
var clip = new zeroclipboard.client(); // 新建一个clip对象
clip.sethandcursor( true ); // 设置鼠标为手型
clip.settext(hello,world); // 设置要复制的文本,可以为文本框的值
clip.glue(copy-botton); // 为clip注册一个按钮,参数为按钮元素的id,点击按钮就可以实现复制
var clip = new zeroclipboard.client(); // 新建一个clip对象
clip.sethandcursor( true ); // 设置鼠标为手型
clip.settext(hello,world); // 设置要复制的文本,可以为文本框的值
clip.glue(copy-botton); // 为clip注册一个按钮,参数为按钮元素的id,点击按钮就可以实现复制
4>zero clipboard常用方法,建议直接查看源码:
reposition():防止当页面大小发生变化时,flash按钮可能会错位问题
hide() :隐藏flash按钮
show() :显示flash按钮
setcsseffects():解决flash遮挡按钮样式失效问题(将:hover修改为.hover)。
5>zero clipboard 常用事件,事件处理函数为addeventlistener():
load :flash按钮加载完事件
mouseover:鼠标移上事件
mouseout: 鼠标移出事件
mousedown:鼠标按下事件
mouseup:鼠标松开事件
complete:复制成功事件
jquery.zclip库
由于zeroclipboard是基于原生javascript实现,jquery.zclip使用jquery对zero clipboard进行封装,如果项目中已经使用jquery,建议使用它,jquery.zclip体积较小。