Zero Clipboard-js复制到剪切板(支持多浏览器)

在前端开发中经常会遇到这样的问题,要求用js将输入框或者div中的内容复制到剪切板。在ie下可以通过clipboardData.setData来实现,但是这个方法却不能兼容其他的浏览器。显然这种方法在这个浏览器异军突起的年代是行不通的。但是如何实现复制内容到剪切板能够兼容多浏览器呢,显然js在这里是江郎才尽了,这里我们需要用js+flash的组合来实现跨浏览器支持复制到剪切板的操作。

这里用到的是外国友人“Joseph Huckaby”写的Zero Clipboard的js库,结合flash(对flash不熟悉,我感觉应该是actionscript脚本,清楚的朋友明示一下)来实现将文本内容复制到剪切板。项目主页【Zero Clipboard】,下载地址【Google code 下载链接】【115网盘下载地址】

Zero Clipboard的安装使用:

下载压缩包,得到两个“ZeroClipboard.js”和“ZeroClipboard.swf”两个文件。

首先页面中载入ZeroClipboard.js

<script type="text/javascript" src="ZeroClipboard.js"></script>

需要注意:ZeroClipboard.js, ZeroClipboard.swf在同一目录下面。如果不在同一目录,可使用ZeroClipboard.setMoviePath( “Flash路径” );来指定ZeroClipboard.swf的地址。

然后插入js脚本

<script type="text/javascript">
    var clip = new ZeroClipboard.Client();//新建对象
    clip.setText( '大爷您来啦!' );//设置要复制的内容
    clip.glue( 'clip_button' );//绑定到一个id为clip_button的元素上
</script>

下面看一个简单的案例:

<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>

运行代码复制代码另存代码(提示:可以编辑后运行)

Zero Clipboard 的高级进阶(设置选项):

  1. 如果ZeroClipboard.swf与js不在同一目录,载入flash的路径

    ZeroClipboard.setMoviePath( 'http://yourhost/ZeroClipboard.swf' ); //采用绝对路径或者相对路径

  2. 设置鼠标移动上去形状

    clip.setHandCursor( true );//true的时候为手型,false为箭头

  3. 将元素绑定到事件,即点击哪个按钮实现复制功能

    clip.glue( 'd_clip_button' );//d_clip_button为绑定的元素的ID

  4. flash重新定位flash的位置采用相对于页面absolute,所以当页面大小改变或者按钮的位置的改变的时候,flash的位置并不能跟随改变。“clip.reposition();” 就是为解决这个问题而存在的。

  5. 设置flash的显隐

    clip.hide();或者clip.show();//show函数可以出发reposition()事件

  6. Css事件由于有flash的遮挡,所以当鼠标移动到元素上的时候,原来的:hover,:active等伪类不会起作用。这时候我们就需要将原来的伪类变成类,比如"a:hover" 变成"a.hover"来实现。这里用到的是该库中的setCSSEffects()函数,默认为开启状态。可以通过“clip.setCSSEffects( false );”来关闭。

  7. 设置flash的大小

    var html = clip.getHTML( 150, 20 );//关于原文的解释我不是很清楚,只知道通过此方法可以设置flash的大小,两个参数对应宽高

Zero Clipboard 的事件处理函数:

可以通过“clip.addEventListener( 'zeroClipboard的事件', 执行函数);” 来实现函数与事件的绑定操作。

onLoad 加载完成事件
onMouseOver 鼠标移上事件
onMouseOut 鼠标移出事件
onMouseDown 鼠标按下事件
onMouseUp 鼠标松开事件
onComplete 复制成功事件
destroy 中断事件,比如复制一次后不能继续执行,可以通过“ clip.destroy(); ”来中断

绑定事件的示例
clip.addEventListener( 'onComplete', my_complete );
function my_complete(){
alert("复制成功!成功复制!");
}

Zero Clipboard 结合jquery的高级用法(示例):

基本参数上面已经说的比较清晰了,下面给大家一个结合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>

运行代码复制代码另存代码(提示:可以编辑后运行)

多说无益,更多详细的介绍还是去看原文吧!


你可能感兴趣的:(Zero Clipboard-js复制到剪切板(支持多浏览器))