无为清净楼资源网 Design By www.qnjia.com
这两天在做Web前端时,遇到需求通过js实现文本复制的功能。
先不考虑浏览器的兼容性,看看各浏览器对复制功能的支持情况:
1、IE浏览器,解决方法有三种,代码如下:
复制代码 代码如下:
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及之前版本可用。代码如下:
复制代码 代码如下:
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="/UploadFiles/2021-04-02/ZeroClipboard.js">注意:ZeroClipboard.js与ZeroClipboard.swf需要放在同一路径下,如果不在同一路径,可使用ZeroClipboard.setMoviePath()来设置。
3>简单复制代码如下:
复制代码 代码如下:
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体积较小。
jquery.zclip下载地址:http://www.steamdev.com/zclip/
Zero Clipboard下载地址:https://github.com/zeroclipboard/ZeroClipboard/releases
示例下载:
为了方便测试,我将jquery.zclip和Zero Clipboard写好的例子上传到csdn,示例必须在web容器里运行。
demo下载地址
先不考虑浏览器的兼容性,看看各浏览器对复制功能的支持情况:
1、IE浏览器,解决方法有三种,代码如下:
复制代码 代码如下:
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及之前版本可用。代码如下:
复制代码 代码如下:
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="/UploadFiles/2021-04-02/ZeroClipboard.js">注意:ZeroClipboard.js与ZeroClipboard.swf需要放在同一路径下,如果不在同一路径,可使用ZeroClipboard.setMoviePath()来设置。
3>简单复制代码如下:
复制代码 代码如下:
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体积较小。
jquery.zclip下载地址:http://www.steamdev.com/zclip/
Zero Clipboard下载地址:https://github.com/zeroclipboard/ZeroClipboard/releases
示例下载:
为了方便测试,我将jquery.zclip和Zero Clipboard写好的例子上传到csdn,示例必须在web容器里运行。
demo下载地址
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
更新日志
2024年10月04日
2024年10月04日
- 纪钧瀚《钢琴阅读时光 雨中书店聆听轻音乐》[FLAC/分轨][399.62MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[320K/MP3][87.4MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[FLAC/分轨][184.94MB]
- 陈慧娴.2018-Priscilla-Ism演唱会3CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 郑秀文.1999-我应该得到(国)【华纳】【WAV+CUE】
- 陈家慧.2011-钢琴酒吧2CD【龙吟唱片】【WAV+CUE】
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[320K/MP3][45.01MB]
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[FLAC/分轨][109.13MB]
- 赞多《序章》[320K/MP3][45.54MB]
- 许巍.2004-每一刻都是崭新的【步升大风】【WAV+CUE】
- 群星.2024-四方馆影视原声带【韶愔音乐】【FLAC分轨】
- 陈雷.1997-安锁咧【金圆唱片】【WAV+CUE】
- 关淑怡.2013-MY.FAVORITE.SK.3CD【环球】【WAV+CUE】
- Sweety.2006-花言乔语【丰华】【WAV+CUE】
- 李恕权.2003-回·20年全精选2CD【SONY】【WAV+CUE】