最近做项目时,在网站框架搭建过程,有一个功能需要实现复制文本到剪贴板,相信这个功能很常用,但是对于不常写js代码的我来说是一个比较大的挑战,回想以前做过的一个站点,使用window.clipboarddata实现复制到剪贴板功能,也仅仅支持ie和ff浏览器,当时在百度找个几个方案,看不下去就放弃了,后来在代码中做了判断,如果不支持该属性,就直接alert:此功能不支持该浏览器,请手工复制文本框中内容。有没有人遇到同样情况?
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程序设计有所帮助。