JavaScript实现复制功能各浏览器支持情况实测

这两天在做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下载地址

赞 (0)

相关推荐

  • JS实现复制功能

    JS实现复制功能

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS复制功能</title> <link href="" rel=" rel="external nofollow" stylesheet"> <style> *{ margin:0; pad

  • js禁止页面复制功能禁用页面右键菜单示例代码

    <body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: 复制代码 代码如下: <script type="text/javascript"> document.body.onselectstart=document.body.oncontextmenu=function(){ return false;} </script> 注意这段代码必须放在

  • JavaScript 复制功能代码 兼容多浏览器

    因此兼容性没得说了,现在用不上的话,先收藏一下吧. JavaScript 复制功能代码,兼容多浏览器 //ie copyValue=function(strValue) { if(isIE()) { clipboardData.setData("Text",strValue); alert("您已成功复制了此地址"); } else { copy(strValue); alert("内容已被复制!"); } } function isIE(num

  • extjs表格文本启用选择复制功能具体实现

    extjs提供了方便的表格组件grid供使用,但是默认情况下表格中的文本是不能被选中的,自然也是无法复制的. 而选择复制文本的需要也是很平常的,于是我们就需要自己动手来解决这个问题,实现extjs的grid文本选择复制功能. 说明一点,文中所列出的代码片断都是在当前ext 4.0.2a版本下的,其它版本未做测试,请自行斟酌. 首先自定义一下样式,来覆盖默认的css样式: 复制代码 代码如下: <style type="text/css"> .x-selectable, .x

  • JavaScript 实现完美兼容多浏览器的复制功能代码

    分享一段利用 JavaScript 实现复制功能的代码,兼容多浏览器,兼容IE和火狐浏览器. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript 复制功能代码,兼容多浏览器&l

  • javaScript复制功能调用实现方案

    复制代码 代码如下: 验证码:<input type="text" id="code"/> <input type="button" value="复制" onclick="fuzhi()"> <script type="text/javascript"> function fuzhi(){ var codeVal=jQuery("#code

  • Zero Clipboard js+swf实现的复制功能使用方法

    开发中经常会用到复制的功能,在 IE 下实现比较简单.但要想做到跨浏览器比较困难了.本文将介绍一个跨浏览器的库类 Zero Clipboard .它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的 document.execCommand("Copy") 更加灵活. Zero Clipboard 的实现原理 Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash.

  • js 复制功能 支持 for IE/FireFox/mozilla/ns

    FF,不支持复制功能,要支持的话,很难的 js 复制功能 支持 for IE/FireFox/mozilla/ns 代码如下: 这里有两各上方式 : // js 复制功能 支持 for IE/FireFox/mozilla/ns function copy_clip(meintext) { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netsc

  • JavaScript实现复制功能各浏览器支持情况实测

    这两天在做Web前端时,遇到需求通过js实现文本复制的功能. 先不考虑浏览器的兼容性,看看各浏览器对复制功能的支持情况: 1.IE浏览器,解决方法有三种,代码如下: 复制代码 代码如下: function copy(txtid){ var txtObj = document.getElementById(txtid); if(window.clipboardData){ // 仅IE支持此对象,firefox.chrome不支持 //1.通过clipboardData对象实现复制 //windo

  • javascript的document.referrer浏览器支持、失效情况总结

    javascript的document.referrer浏览器支持、失效情况总结

    在流量统计服务中都有Traffic source这个功能.Traffic source是针对访次级别的概念,换句话说,当访次建立的时候,landing page的流量来源即是该访次的Traffic source.虽然Traffic source有很多种,不过不幸的是依据现在JS,获得Traffic source的途径只有两种--document.referrer.window.opener.更不幸的是,window.opener适用的场景不多,而document.referrer非常的弱,以至于

  • javascript 实现的多浏览器支持的贪吃蛇webgame

    写的太累了 ,写了3个小时!大家可以玩玩看 界面不美,尽管批 www.jb51.net 我们 贪吃蛇 //获取新生元素位置 var bucunzai=true;//记录新元素是不是移动 var xinkx; var xinky; //页面载入后k元素定位 function lo(){ var objectp=document.getElementById("k") objectp.style.left="250px" objectp.style.top="

  • JavaScript快速检测浏览器对CSS3特性的支持情况

    JavaScript快速检测浏览器对CSS3特性的支持情况

    在项目中需要快速检测浏览器是否支持某CSS3特性,比如检测是否支持"transform",然后我的布局会有两种完全不同的版式. 当然除开本文介绍的这种快速方法,还有一种更有名和更通用的方法,那就是modernizr,运行脚本之后它会在html的class上加上浏览器支持的所有特性的列表. 优点: js是可配置的,不需要的特性检测可以在配置脚本中去掉基于特性检测js库简单好用 除此之外还有一种不太好的方法,那就是判断浏览器的UA,不好的原因是UA可能会伪造,而且版本判断繁琐,还有不稳定.

  • js监听表单value的修改同步问题，跨浏览器支持

    js监听表单value的修改同步问题，跨浏览器支持

    想要实现的功能大概是这样的: 有两个文本框,其中一个只读,另一个可以输入.要求在可输入文本框中输入文本时,只读文本框能够获得输入的值,且只读文本框旁边出现提示信息,实时显示只读文本框的内容. 这个功能看是简单,但其实并没有想象的那么简单.(注意,可输入框的处理没什么可讨论的,关键是只读框的处理) 一开始,我们一般会想到在只读文本框上运用onchange事件.一试,发现onchange根本没用,该事件是在文本框获得焦点,然后内容改变失去焦点后才触发的,现在在只读文本框上根本没有这些,它的内容是通过

  • JavaScript遍历Json串浏览器输出的结果不统一问题

    没有介绍正文之前先给大家说下json是什么. JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,我们称之为JavaScript对象表示法.使用JSON进行数据传输的优势之一是JSON实际上就是JavaScript.它基于ECMAScript第3版中JavaScript对象字面量语法子集的一种文本格式.这表示可以使用responseText从服务器中检索JSON数据,然后再使用JavaScript的eval()方法将JSON字符串转换成JavaScrip

  • javascript框架设计之浏览器的嗅探和特征侦测

    浏览器的嗅探现在已经不推荐了,但在某些场合还是需要的.比如一些统计脚本.在标准浏览器里,提供了document.implementation.hasfeature,可惜有bug,不准确,目前,w3c又推出了CSS.supports方法,显示出大家对这块的关注. 1.判定浏览器. 主流的浏览器有ie firefox opera chorme safari 早期这些框架都是通过navigator.userAgent进行判定,目前国外的浏览器几乎都是可以判定的. 关于浏览器的判断脚本,jQuery已经

  • 如何使用JavaScript检测空闲的浏览器选项卡

    在某些情况下,当用户与我们的最终产品或应用程序进行交互时,我们发现自己会执行许多密集的,占用大量CPU的任务.启动轮询器,建立WebSocket连接,甚至加载视频或图片等媒体,都有可能成为性能障碍,尤其是当这些任务在不需要的情况下消耗资源的时候. 在用户没有主动与界面交互的同时,从不必要的工作负载或网络请求中释放主线程是一个非常好的和有意义的实践.换一种方式,在大多数主机提供商都在引入基于配额的定价模式的行业中,减少网络请求也可以降低运行应用程序或服务的成本. 页面可见性(Page Visibi

  • JavaScript中防止微信浏览器被整体拖动的方法

    JavaScript中防止微信浏览器被整体拖动的方法

    在微信网页开发中,我使用的页面结构是在body下的container覆盖全屏,container下有个header和page的容器,page负责显示所有内容并实现滚动. 结构如图: 但是遇到了一个问题:在页面已经滚动到顶部时,继续往下拖动page容器,会将微信浏览器整体往下拖,漏出"该网页由XXX提供"的提示,然后在安卓下,影响并不大,但是在iphone下,就没那么简单了,经过测试,在苹果下,往下拖动后快速滑动页面中的page,page并不会滚动,上拖同样遇到了这个问题,非常影响体验.

  • 如何让浏览器支持jquery ajax load 前进、后退功能

    一般在做 ajax load 的时候,很多人都不会考虑到需要浏览器支持前进后退功能,因为大部分人都不知道可以实现. 最近遇到这个问题,经过一小段研究,发现github已经有现成的开源工具使用,主要实现原理是利用html的锚点,即<a href="#xxx"> 主要demo代码如下: html 复制代码 代码如下: <ul> <li><a href="#ttt">ttttttttttttttt</a><

随机推荐