js实现了点击并复制当前文本到剪贴板的功能(兼容所有浏览器)

最近，在构建网站框架的过程中，有一个功能需要将文本复制到剪贴板。我相信这个函数很常见，但是对于不常写JS代码的我来说，这是一个很大的挑战。回顾之前的一个站点，我用window.clipboardData实现了复制到剪贴板的功能，只支持IE和FF浏览器。当时在百度找到了几个解决方案，看不到就放弃了。后来我在代码里做了一个判断。如果不支持这个属性，我会直接提醒：这个功能不支持这个浏览器。请手动复制文本框中的内容。有人遇到过同样的情况吗？

alert(‘此功能不支持此浏览器，请手动复制文本框中的内容’)；今天，我将为大家分享和使用复制到剪贴板的功能。由于能力有限，有错误的地方请多多指教~

相信很多使用过wordpress搭建网站的同学都知道它使用jQuery，这对于大家来说并不陌生，使用起来也非常简单。遗憾的是，jQuery本身并没有实现复制到剪贴板的功能，但或许它的API会有这个功能。这次我建立的网站使用了wordpress，我花了一些时间搜索jQuery复制到剪贴板的API。真的有jQuery ZeroClipboard，所以我用它简单实现了wordpress中复制到剪贴板的功能。然而，jQuery ZeroClipboard曾经有一个名为ZeroClipboard的父亲。

作为一个独立的js库，Zero Clipboard需要两个文件：ZeroClipboard.js和ZeroClipboard.swf网上有两个版本，实现原理是用flash进行复制。不知道原来是谁的，或者可能是家里的两个兄弟，所以不在乎。只要我们尊重版权，问心无愧，今天给大家介绍的版本就比较简单。

首先看下图，显示了使用Zero剪贴板后生成的flash对象。它与flash10和以下版本兼容，并且兼容所有浏览器：

零剪贴板的官方地址：http://zeroclipboard.org/.

它需要构建一个服务器环境，这对于一些学生来说可能是不清楚的。构建服务器环境的方法有很多，比如xp或win7系统自带的IIS，也可以使用xampp、appserv、APMServ等集成包，这些包都可以安装。构建起来非常简单，这里就不介绍了。

现在我们使用独立的js库Zero Clipboard简单实现复制到剪贴板的功能，演示如下：

！DOCTYPE htmlhtmlheadtitleZero剪贴板Test/title meta charset=' utf-8 '/head body！-描述：1 .数据-剪贴板-目标输入要复制的对象的id-button id=' d _ clip _ button ' class=' my _ clip _ button '数据-剪贴板-目标=' Fe _ text '复制到剪贴板/button br/Textarea id=' Fe _ text ' cols=' 50 ' row=' 3 '输入要复制的内容/Textarea/body/html Script type=' text/JavaScript ' src=' http 3360 zero clipboard . js '/Script type=' text/text//operation clip.on ('complete '，function (client，args) {alert('复制成功，复制内容为：' args . text ')；} );/scriptdemo下载(温馨提醒：下载代码的同学在浏览demo时要记得使用服务器环境，否则看不到效果~)。

接下来，介绍jQuery零剪贴板。

JQuery ZeroClipboard是基于ZeroClipboard的改进，简称zclipboard。作为jQuery的API，jQuery ZeroClipboard也非常容易操作。

使用前应该引用两个js文件：jquery.js和jquery.zclip.js

脚本类型=' text/JAVAScript ' src=' http : js/jquery . js '/script script type=' text/JAVAScript ' src=' http : js/jquery.zclip.js '/脚本现在我们使用jquery . zclip . js简单实现复制到剪贴板功能演示如下：

！DOCTYPE html html head title zero clipboard Test/title meta charset=' utf-8 ' style type=' text/CSS ' .行{边距-底部：20 px}/* 复制提示*/.复制提示{ position:fixedz指数：999;底部：50%;左侧：50%;余量：0 0-20px-80px；背景-color:rgba(0，0，0，0.2)；过滤器： progid : maximagettransform .微软。渐变(startColorstr=# 30000000，endColorstr=# 30000000)；padding:6px }。复制-提示-包装{ padding:10px 20px文本对齐：居中；border:1px实心# F4d 9 a6背景-颜色： # FFFDEEfont-size :14 px}/style脚本类型=' text/JavaScript ' src=' http : jquery。js '/script脚本类型=' text/JavaScript ' src=' http : jquery。zclip。js '/脚本/head dydiv class=' line ' H2演示1点击复制当前文本/h2 a href='#none' class='copy '点击复制我/a/divdiv class='line' h2demo2点击复制表单中的文本/H2 a href=' # none ' class=' copy-input '点击复制单中的文本/a输入类型='text' class='input' value='输入要复制的内容//div/body/html脚本类型=' text/JavaScript ' $(文档)。就绪（函数(){/*定义所有班级为复制标签，点击后可复制被点击对象的文本*/$('.复制')。zclip({ path : ' zero剪贴板。' swf '，复制：函数(){ return $(this).text()；}，beforeCopy:function(){/*按住鼠标时的操作*/$(这个)。css('color '，' orange ')；}，afterCopy:function(){/*复制成功后的操作*/var $ copy suc=$(' div class=' copy-tips ' div class=' copy-tips-wrap '复制成功/div/div ')；$(“正文”).查找('。复制提示')。移除()。end().追加($ copy suc)；$('.复制提示')。淡出(3000)；} });/* 定义所有班级为复制输入标签，点击后可复制班级为投入的文本*/$('.复制输入')。zclip({ path : ' zero剪贴板。' swf '，复制：函数(){ return $(this).父项()。查找('。输入')。val()；}，afterCopy:function(){/*复制成功后的操作*/var $ copy suc=$(' div class=' copy-tips ' div class=' copy-tips-wrap '复制成功/div/div ')；$(“正文”).查找('。复制提示')。移除()。end().追加($ copy suc)；$('.复制提示')。淡出(3000)；} });});/scriptdemo下载（温馨提示：下载代码的同学，浏览演示时记得使用服务器环境，不然看不到效果的~)

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

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

使用哪种复制方式还是具体定位情况，希望本文所述对大家学习爪哇岛描述语言程序设计有所帮助。