JavaScript实现复制功能

这两天在做Web前端时,遇到需求通过js实现文本复制的功能。

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

1、IE浏览器,解决方法有三种,代码如下:

[javascript] view plaincopy

  1. function copy(txtid){
  2. var txtObj = document.getElementById(txtid);
  3. if(window.clipboardData){ // 仅IE支持此对象,firefox、chrome不支持
  4. //1、通过clipboardData对象实现复制
  5. //window.clipboardData.clearData();
  6. //window.clipboardData.setData("Text",txtObj.value);
  7. //2、通过document对象实现复制:先选择中文本,再执行复制命令
  8. //txtObj.select();
  9. //document.execCommand("Copy"); // 仅IE支持,Firefox报语法错误,chrome执行结果返回false(不支持)
  10. //3、通过TextRange对象实现现复制:可以不用先选中内容
  11. txtObj.createTextRange().execCommand("Copy");
  12. }
  13. }

2、Firefox,通过接口的方法实现,火狐是出于安全原因,在17之后版本关闭此接口,17及之前版本可用。代码如下:

[javascript] view plaincopy

  1. 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] view plaincopy

  1. var clip = new ZeroClipboard.Client();  // 新建一个clip对象
  2. clip.setHandCursor( true );                 // 设置鼠标为手型
  3. clip.setText("hello,world");                  // 设置要复制的文本,可以为文本框的值
  4. 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容器里运行。

下载地址:http://download.csdn.net/detail/bbirdsky/5776583

转自:http://blog.csdn.net/bbirdsky/article/details/9368169

时间: 2024-08-12 21:54:23

JavaScript实现复制功能的相关文章

javascript如何屏蔽复制功能

javascript如何屏蔽复制功能:有的网站的站长不希望内容被别人轻易的拷贝走,所以就用代码禁止网页内容被复制,当然这可能对于稍微知道网页知识的人的作用不大,但是也能够起到一定的作用,起码客户是有需求的,所以程序员必须要会.复制一般采用右键点击赋值,还有一种办法是使用CTRL+V键进行进行复制,下面是一段代码能够屏蔽两者.代码实例如下: document.oncontextmenu=function(){ return false; } document.onkeydown=function(

javascript 点击触发复制功能

摘要: js调用复制功能使用: document.execCommand("copy", false); document.execCommand()方法功能很强大,了解更多请戳:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand 正文: 调用以上方法,就实现了copy功能,可是,在调用之前,你需要先选中需要复制的内容. 选中需要复制的内容可使用select()方法,然而该方法只能选中input或者

关于Javascript中的复制

在做项目时有一个需求,是需要复制内容到剪切板,因为有众多浏览器,所以要兼容性很重要 1.最简单的copy,只能在IE下使用 使用clipboardData方法 <script language="javascript"> function copy(){ window.clipboardData.setData("text",document.getElementById("name").value); alert("The

8年javascript知识点积累

08年毕业就开始接触javascript,当时是做asp.net发现很多功能用asp.net控件解决不了,比如checkbox单选,全选问题,自动计算总价问题,刷新问题,等等.那时感觉javascript好讨厌,没有好的框架和调试工具,痛不欲生.如今javascript框架漫天飞舞,jquery,zepto,AngularJs,各种应用层出不穷,动画,游戏,单页网站,甚至手机app,那里都少不了javascript,不禁感叹,还有没有javascript不能做的事情么? 8年了,如今多半时间是管

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

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

javascript屏蔽右键功能

转自:http://www.jbxue.com/article/js/20871.html 发布时间:2014-05-15   编辑:www.jbxue.com 本文介绍了javascript屏蔽右键的二种方法,屏蔽右键在某些特殊的情况下很有用,需要的朋友参考下. 例1,javascript屏蔽右键 . 复制代码代码示例: document.oncontextmenu=function(e){ return false; }; 例2,jquery禁用右键. jquery禁用右键: 复制代码代码示

Javascript中call的使用

call 方法应用于:Function 对象调用一个对象的一个方法,以另一个对象替换当前对象.call([thisObj[,arg1[, arg2[,   [,.argN]]]]])参数:thisObj 可选项.将被用作当前对象的对象. arg1, arg2, , argN 可选项.将被传递方法参数序列. 说明:call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象.如果没有提供 thisObj 参数,那么 G

你不知道的javascript 之 &gt;&gt;

?远大于符号 在数学公式中,">>"代表远大于符号,表示一个数远大于另一个数,如76>>3,-2>>-99等.庞加莱与波莱尔1901年首先使用了它,很快被数学界所接受,沿用至今. 折叠编辑本段右移运算符 在许多计算机编程语言(例如:C语言.C++语言.Java语言.JavaScript语言.Pascal语言等)中,">>"代表右移运算符,就相当于"shr".该运算符为双目运算符,结合方向为从左到右,

初识JavaScript

JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能.因为JavaScript兼容于ECMA标准,因此也称为ECMAScript. ECMAScript,描述了该语javascript组成言的语法和基本对象. 文档对象模型(DOM),描述处理网页内容的方法