视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript实现复制功能
2020-11-27 20:30:39 责编:小采
文档


先不考虑浏览器的兼容性,看看各浏览器对复制功能的支持情况:

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体积较小。

下载本文
显示全文
专题