JavaScript实现复制功能各浏览器支持情况实测
更新时间：2013年07月18日 17:26:44 作者：
这两天在做Web前端时，遇到需求通过js实现文本复制的功能，下面与大家分享下各浏览器对复制功能的支持情况，感兴趣的朋友可以参考下哈
这两天在做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="ZeroClipboard.js"></script>;
注意：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="ZeroClipboard.js"></script>;
注意：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下载地址
相关文章
这篇文章主要为大家详细介绍了如何基于HTML5 Canvas和jQuery实现的简单网页版绘图编辑器,文中的示例代码讲解详细,需要的小伙伴可以了解下2024-10-10
扩展IE中一些不兼容的方法如contains、startWith等等
扩展IE中一些不兼容的方法如contains方法、startWith方法等等，下面是具体的实现代码，喜欢的朋友可以参考下2014-01-01
JSChart是一个轻量级的在线图表生成工具，本身十分小巧，简单易用，相对来讲功能也不是特别强大，但是对于一些要求不高的应用来讲已经够用了，最近两天在做一个监控系统，想到了它。2010-10-10
这篇文章主要介绍了JS写滑稽笑脸运动效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
js版本A*寻路算法...2006-12-12
这篇文章主要介绍了编写一个javascript元循环求值器的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了JavaScript隐式类型转换例子总结,熟练掌握类型转换，理解其中的规律。可以让你的代码更简洁更安全,下文围绕主题JS隐式转换,需要的朋友可以参考一下2022-08-08
这篇文章主要介绍了JS回调函数,结合实例形式深入分析了js回调函数的概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下2019-10-10
web程序开发中经常会遇见选择文件夹的时候，这对于web程序员是一件麻烦的事情，由于本地安全限制JS不能访问本地文件，所以选择文件夹一般都避而不谈，笔者在写一个程序的时候也遇见了同样的问题，开始尝试使用JS来遍历文件，结果都没有成功2009-07-07
下面小编就为大家带来一篇原生JS:Date对象全面解析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
最新评论