在前端开发中常常会遇到这样的问题,要求用js将输入框或者div中的内容复制到剪切板。在ie下能够经过clipboardData.setData来实现,可是这个方法却不能兼容其余的浏览器。显然这种方法在这个浏览器异军突起的年代是行不通的。可是如何实现复制内容到剪切板可以兼容多浏览器呢,显然js在这里是江郎才尽了,这里咱们须要用js+flash的组合来实现跨浏览器支持复制到剪切板的操做。javascript
这里用到的是外国友人“Joseph Huckaby”写的Zero Clipboard的js库,结合flash(对flash不熟悉,我感受应该是actionscript脚本,清楚的朋友明示一下)来实现将文本内容复制到剪切板。项目主页【Zero Clipboard】,下载地址【Google code 下载连接】【115网盘下载地址】css
下载压缩包,获得两个“ZeroClipboard.js”和“ZeroClipboard.swf”两个文件。html
首先页面中载入ZeroClipboard.js前端
<script type="text/javascript" src="ZeroClipboard.js"></script>java
须要注意:ZeroClipboard.js, ZeroClipboard.swf在同一目录下面。若是不在同一目录,可以使用ZeroClipboard.setMoviePath( “Flash路径” );来指定ZeroClipboard.swf的地址。jquery
而后插入js脚本浏览器
<script type="text/javascript"> var clip = new ZeroClipboard.Client();//新建对象 clip.setText( '大爷您来啦!' );//设置要复制的内容 clip.glue( 'clip_button' );//绑定到一个id为clip_button的元素上 </script>
下面看一个简单的案例:ide
<html> <body> <script type="text/javascript" src="http://www.niumowang.org/wp-content/plugins/pizi_run_code/ZeroClipboard.js"></script> <div id="clip_button" style="border:1px solid black; padding:20px;width:150px;"> 点击复制到剪切板 </div> <textarea style="width:300px;height:100px;margin-top:20px;">粘贴到这里</textarea> <script language="JavaScript"> var clip = new ZeroClipboard.Client(); clip.setText( '摸我啊,来摸我!' ); clip.glue( 'clip_button' ); </script> </body> </html>
若是ZeroClipboard.swf与js不在同一目录,载入flash的路径
this
ZeroClipboard.setMoviePath( 'http://yourhost/ZeroClipboard.swf' ); //采用绝对路径或者相对路径
设置鼠标移动上去形状
clip.setHandCursor( true );//true的时候为手型,false为箭头
将元素绑定到事件,即点击哪一个按钮实现复制功能
clip.glue( 'd_clip_button' );//d_clip_button为绑定的元素的ID
flash从新定位flash的位置采用相对于页面absolute,因此当页面大小改变或者按钮的位置的改变的时候,flash的位置并不能跟随改变。“clip.reposition();” 就是为解决这个问题而存在的。
设置flash的显隐
clip.hide();或者clip.show();//show函数能够出发reposition()事件
Css事件因为有flash的遮挡,因此当鼠标移动到元素上的时候,原来的:hover,:active等伪类不会起做用。这时候咱们就须要将原来的伪类变成类,好比"a:hover" 变成"a.hover"来实现。这里用到的是该库中的setCSSEffects()函数,默认为开启状态。能够经过“clip.setCSSEffects( false );”来关闭。
设置flash的大小
var html = clip.getHTML( 150, 20 );//关于原文的解释我不是很清楚,只知道经过此方法能够设置flash的大小,两个参数对应宽高
能够经过“clip.addEventListener( 'zeroClipboard的事件', 执行函数);” 来实现函数与事件的绑定操做。
onLoad 加载完成事件
onMouseOver 鼠标移上事件
onMouseOut 鼠标移出事件
onMouseDown 鼠标按下事件
onMouseUp 鼠标松开事件
onComplete 复制成功事件
destroy 中断事件,好比复制一次后不能继续执行,能够经过“ clip.destroy(); ”来中断绑定事件的示例
clip.addEventListener( 'onComplete', my_complete );
function my_complete(){
alert("复制成功!成功复制!");
}
基本参数上面已经说的比较清晰了,下面给你们一个结合jquery使用的示例。
<html> <head> <title>Zero Clipboard 结合jquery使用示例</title> <style type="text/css"> body { font-family: "Microsoft YaHei","微软雅黑" !important; font-size:9pt; } div.multiple { float: left; background-color: white; width:200px; height:200px; border:1px solid #ccc; margin:5px; cursor: pointer; font-size: 14pt; } div.multiple.hover { background-color: #ddd; } </style> <script type="text/javascript" src="http://www.niumowang.org/wp-content/themes/pizi/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://www.niumowang.org/wp-content/plugins/pizi_run_code/ZeroClipboard.js"></script> <script language="JavaScript"> var clip = null; function init() { clip = new ZeroClipboard.Client();//建立对象 clip.setHandCursor( true );//鼠标手型 $('div.multiple').mouseover( function() { clip.setText( this.innerHTML );//设置复制的内容 if (clip.div) { clip.receiveEvent('mouseout', null); clip.reposition(this); }//若是已经存在flash,那么从新定位 else clip.glue(this); clip.receiveEvent('mouseover', null); } ); } </script> </head> <body onload="init()"> <h1>Zero Clipboard 结合jquery使用示例</h1> <div class="multiple"> Hello啊,树哥! </div> <div class="multiple"> 请问,你认识春爷吗? </div> <div class="multiple"> 贾君鹏,你妈妈喊你回去搓麻将! </div> <div class="multiple"> 我爱你的时候,你打我骂我,我都忍了,我不爱你了,你再碰我试试。 </div> <div class="multiple"> 再发嗲,也改变不了你奔三的年龄和样貌! </div> <div class="multiple"> 你看与不看,你知道与不知道,牛魔王的世界观都是这样的! </div> <div style="clear:both;"> </div> <br/><br/> 把你的狗皮膏药贴到这里:<br/> <textarea id="testarea" cols='50' rows='10'></textarea><br/> <input type='button' value="清除文本框的内容" onclick="document.getElementById('testarea').value = '';"/> </body> </html>
多说无益,更多详细的介绍仍是去看原文吧!