视频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
js实现点击复制当前文本到剪贴板功能(兼容所有浏览器)_javascript技巧
2020-11-27 21:47:39 责编:小采
文档
 最近做项目时,在网站框架搭建过程,有一个功能需要实现复制文本到剪贴板,相信这个功能很常用,但是对于不常写JS代码的我来说是一个比较大的挑战,回想以前做过的一个站点,使用window.clipboardData实现复制到剪贴板功能,也仅仅支持IE和FF浏览器,当时在百度找个几个方案,看不下去就放弃了,后来在代码中做了判断,如果不支持该属性,就直接alert:此功能不支持该浏览器,请手工复制文本框中内容。有没有人遇到同样情况?



今天就为大家分享使用复制到剪贴板功能,由于能力有限,有错误的地方还请大家多多指教~

相信很多使用wordpress搭建过站点的同学都知道它采用了jQuery,对jQuery大家并不陌生,使用起来非常简单,可惜jQuery本身并没有实现复制到剪贴板的功能,但或许它的API会有这个功能。这次我搭建的站点采用wordpress,花了点时间搜索jQuery复制到剪贴板的API,还真的有:jQuery ZeroClipboard ,于是使用它在wordpress简单实现了复制到剪贴板的功能。但是呢,jQuery ZeroClipboard原来是有个父亲大人,叫Zero Clipboard。

Zero Clipboard作为一个的js库,它利用 Flash 进行复制,需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf 。网络上有2个版本,实现原理都是使用flash进行复制,不知道原创是谁的,也可能一家子的2个兄弟,这个就不管了,只要我们自己做到尊重版权,表示问心无愧,今天给大家介绍的这个版本相对来说比较简单。

首先看下图是为使用Zero Clipboard后生成的flash对象,它能兼容的flash10及以下版本,兼容所有的浏览器:

Zero Clipboard的官方地址:http://zeroclipboard.org/,

使用它需要搭建服务器环境,可能有同学不太清楚,关于搭建服务器环境的,方法有很多,如xp或者win7系统自带的IIS,也可以使用xampp、appserv、APMServ等集成包,安装即可,搭建起来非常简单,这里不做介绍。

现在我们先使用的js库Zero Clipboard简单实现复制到剪贴板功能,demo如下:




Zero Clipboard Test






demo下载 (温馨提示:下载代码的同学,浏览demo时记得使用服务器环境,不然看不到效果的~)

接下来介绍jQuery ZeroClipboard

jQuery ZeroClipboard是在ZeroClipboard的基础上进行的改良,简称zClip,作为jQuery的API,jQuery ZeroClipboard也表现的非常简易操作。

使用前需引用2个js文件:jquery.js和jquery.zclip.js


现在我们使用jquery.zclip.js简单实现复制到剪贴板功能demo如下:




ZeroClipboard Test







 

demo1 点击复制当前文本

点击复制我

demo2 点击复制表单中的文本

点击复制单中的文本

demo下载 (温馨提示:下载代码的同学,浏览demo时记得使用服务器环境,不然看不到效果的~)

上面代码中结合jQuery的操作节点的功能,出色的发挥jquery.zclip.js的作用,如复制前后的操作,动态插入节点,也可见jquery.zclip.js的强大之处,使用起来是非常简单。

从上面的js库ZeroClipboard.js和jquery.zclip.js 都是采用flash实现实现复制到剪贴板的功能,可以看出,使用ZeroClipboard.js带来功能相对比较少,不过它是的库,文件比较小,而使用jquery.zclip.js后的功能是比较丰富,不过对于不使用jQuery框架的站点来说,采用jquery.zclip.js是比较浪费宽带。

使用哪种复制方式还是具体定位情况,希望本文所述对大家学习javascript程序设计有所帮助。

下载本文
显示全文
专题